@strata-packages/modal
Advanced tools
Lightweight modal component. Works standalone or with Strata CSS.
A lightweight, accessible modal component for Strata CSS. Zero dependencies. Works standalone or as part of Strata.
npm install @strata-packages/modal
<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]).
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.
<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>
<button data-st-toggle="modal" data-st-target="#myModal">Open</button>
// Standalone
StrataModal.open('#myModal')
StrataModal.close()
// With Strata
Strata.Modal.open('#myModal')
Strata.Modal.close()
// Pass element directly
Strata.Modal.open(document.getElementById('myModal'))
<!-- Any element inside the modal -->
<button data-st-dismiss="modal">Close</button>
Also dismisses on:
data-st-backdrop="static")Escape (unless static)Prevents closing on backdrop click — shows a shake animation instead.
<div id="myModal" class="modal" data-st-backdrop="static">
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">
<!-- Vertically centered -->
<div class="modal-dialog modal-dialog-centered">
<!-- Scrollable body -->
<div class="modal-dialog modal-dialog-scrollable">
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)
})
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;
}
<body>[autofocus] element, or .modal-content, on openMIT © Aftab Ibrahim Kazi
FAQs
Lightweight modal component. Works standalone or with Strata CSS.
The npm package @strata-packages/modal receives a total of 6 weekly downloads. As such, @strata-packages/modal popularity was classified as not popular.
We found that @strata-packages/modal demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Research
/Security News
Ten malicious OpenAPI React Query Codegen versions were published to npm in the Mini Shai-Hulud attack, all with valid provenance.
Security News
Socket joins more than 100 technology, cybersecurity, and financial organizations calling for a global surge in cyber defense.
Product
Enterprise security teams can now detect malware, credential theft, suspicious network activity, and risky updates across Microsoft Edge extensions.