An <aegis-modal> component built using @aegisjsproject/component,
offering full built-in accessibility, customization, and enhanced security.
Important differences compared to <dialog>
-
<aegis-modal>is modal-only -
<aegis-modal>SHOULD only be appended as a direct child of<body> -
<aegis-modal>automatically adds a sticky header and close button - Provides simple open/close animations
- Has an
autoremoveattribute to automatically remove the element once closed - Supports an optional
AbortControllerin theshow({ signal })method - Adds
whenOpenedandwhenClosedgetter methods, returning relevant promises - Adds a static
create()method, which creates and optionally appends and opens if given asignal
The entire AegisJSProject ecosystem requires support for Element.prototype.setHTML()
and Constructable Stylesheets.
Additionally, Promise.withResolvers()
as well as inert
are also required for proper functionality.
Such polyfills are not included to avoid the bloat/duplication of polyfills. However, an extensive polyfill script that ensures compatibility is available via:
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-Shkrmxly5RI9mCU8DQr6l4VLVJzjPzgx9KP/f5i7pEcl7ZUt0wHiAweGjbpjU2d5" src="https://unpkg.com/@shgysk8zer0/polyfills@0.3.1/all.min.js" fetchpriority="auto"></script><script type="module" src="https://unpkg.com/@aegisjsproject/aegis-modal[@:version]/aegis-modal.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>npm i @aegisjsproject/aegis-markdownVia Git Submodule
git subomdule add https://github.com/AegisJSProject/aegis-modal [:destination]All @aegisjsproject/* libraries are available and ready to use without a build
process such as webpack, but will require a <script type="importmap"> that includes
all dependencies:
<script type="importmap">
{
"imports": {
"@aegisjsproject/": "https://unpkg.com/@aegisjsproject/"
}
}
</script>{
"imports": {
"@aegisjsproject/core/": "https://unpkg.com/@aegisjsproject/core@0.1.2/",
"@aegisjsproject/styles/": "https://unpkg.com/@aegisjsproject/styles@0.1.1/",
"@aegisjsproject/component/": "https://unpkg.com/@aegisjsproject/component@0.1.1/",
"@aegisjsproject/aegis-modal/": "https://unpkg.com/@aegisjsproject/aegis-modal@0.0.1/"
}
}... or ...
<script type="importmap">
{
"imports": {
"@aegisjsproject/": "/node_modules/@aegisjsproject/"
}
}
</script><aegis-modal>
<h1 slot="heading">Lorem Ipsum</h1>
<p>Error aut mollitia qui alias aut. Temporibus vitae impedit deserunt repellat voluptatibus et. Minima aut et tempore. Ut officiis sed consectetur. Voluptas praesentium ipsam rerum eligendi dolorum. Voluptatem similique omnis quis quidem.</p>
</aegis-modal>