Modal

Lightweight modal component. Works standalone or with Strata CSS.

version1.0.2CSSVanilla JS

modaldialogoverlay

6.8 KB gzip

2 deps

Updated 3d ago

MIT License

View on GitHub View on npm

Installation

npm install @strata-packages/modal

Usage

Standalone

<link  rel="stylesheet" href="node_modules/@strata-packages/modal/modal.css">
<script src="node_modules/@strata-packages/modal/modal.js"></script>

Available as StrataModal. CSS tokens are self-contained when Strata is not present — detected automatically via :root:not([data-strata]).

With Strata CSS

The modal is bundled into Strata's component build — do not load modal.js separately when using the full Strata bundle.

Available as Strata.Modal.

HTML Structure

<div id="myModal" class="modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button data-st-dismiss="modal" class="btn-close"></button>
      </div>

      <div class="modal-body">
        Body content here.
      </div>

      <div class="modal-footer">
        <button data-st-dismiss="modal" class="btn-secondary">Cancel</button>
        <button class="btn-primary">Confirm</button>
      </div>

    </div>
  </div>
</div>

Triggering

Declarative — no JS needed

<button data-st-toggle="modal" data-st-target="#myModal">Open</button>

Programmatic

// Standalone
StrataModal.open('#myModal')
StrataModal.close()

// With Strata
Strata.Modal.open('#myModal')
Strata.Modal.close()

// Pass element directly
Strata.Modal.open(document.getElementById('myModal'))

Dismissing

<!-- Any element inside the modal -->
<button data-st-dismiss="modal">Close</button>

Also dismisses on:

Clicking the backdrop (unless data-st-backdrop="static")
Pressing Escape (unless static)

Static Backdrop

Prevents closing on backdrop click — shows a shake animation instead.

<div id="myModal" class="modal" data-st-backdrop="static">

Size Variants

Applied to the .modal element:

<div class="modal modal-sm">   <!-- 300px  -->
<div class="modal modal-lg">   <!-- 800px  -->
<div class="modal modal-xl">   <!-- 1140px -->
<div class="modal modal-fullscreen">

Responsive fullscreen (fullscreen below a breakpoint):

<div class="modal modal-fullscreen-md-down">

Dialog Variants

<!-- Vertically centered -->
<div class="modal-dialog modal-dialog-centered">

<!-- Scrollable body -->
<div class="modal-dialog modal-dialog-scrollable">

Events

Fired on document:

document.addEventListener('st:modal:open', e => {
  console.log('opened:', e.detail.modal)
})

document.addEventListener('st:modal:close', e => {
  console.log('closed:', e.detail.modal)
})

CSS Variables

When used standalone (without Strata), the modal defines its own tokens:

--st-modal-bg:       /* modal content background */
--st-modal-border:   /* modal border color */
--st-modal-shadow:   /* modal box shadow */

Override per-instance:

#myModal .modal-content {
  --st-modal-bg: #1a1a2e;
}

Known Limitations

One modal open at a time — opening a second modal closes the first
Backdrop is a single shared element appended to <body>
Focus moves to the first [autofocus] element, or .modal-content, on open