https://github.com/aegisjsproject/aegis-modal
Aegis component for accessible modal elements
https://github.com/aegisjsproject/aegis-modal
aegis aegis-component custom-element dialog modal web-component
Last synced: 10 months ago
JSON representation
Aegis component for accessible modal elements
- Host: GitHub
- URL: https://github.com/aegisjsproject/aegis-modal
- Owner: AegisJSProject
- License: mit
- Created: 2024-03-04T20:53:04.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2025-08-16T13:53:53.000Z (10 months ago)
- Last Synced: 2025-08-16T15:24:41.422Z (10 months ago)
- Topics: aegis, aegis-component, custom-element, dialog, modal, web-component
- Language: JavaScript
- Homepage: https://npmjs.org/package/@aegisjsproject/aegis-modal
- Size: 1.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# `@aegisjsproject/aegis-modal`
An `` component built using [`@aegisjsproject/component`](https://npmjs.org/package/@aegisjsproject/component),
offering full built-in accessibility, customization, and enhanced security.
[](https://github.com/shgysk8zer0/npm-template/actions/workflows/codeql-analysis.yml)
[](https://@github.com/AegisJSProject/aegis-modal/blob/master/LICENSE)
[](https://@github.com/AegisJSProject/aegis-modal/commits/master)
[](https://@github.com/AegisJSProject/aegis-modal/releases)
[](https://github.com/sponsors/shgysk8zer0)
[](https://www.npmjs.com/package/@aegisjsproject/aegis-modal)
[](https://www.npmjs.com/package/@aegisjsproject/aegis-modal)
[](https://github.com/AegisJSProoject)
[](https://twitter.com/shgysk8zer0)
[](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
- - -
- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
- [Contributing](./.github/CONTRIBUTING.md)
## Important differences compared to [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
- `` is modal-only
- `` **SHOULD** only be appended as a direct child of ``
- `` automatically adds a sticky header and close button
- Provides simple open/close animations
- Has an `autoremove` attribute to automatically remove the element once closed
- Supports an optional `AbortController` in the `show({ signal })` method
- Adds `whenOpened` and `whenClosed` getter methods, returning relevant promises
- Adds a static `create()` method, which creates and optionally appends and opens if given a `signal`
## Compatibility / polyfills
The entire AegisJSProject ecosystem requires support for [`Element.prototype.setHTML()`](https://github.com/WICG/sanitizer-api)
and [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets).
Additionally, [`Promise.withResolvers()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers)
as well as [`inert`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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:
```html
```
## Installation
### Via CDN:
```html
```
### Via npm
```bash
npm i @aegisjsproject/aegis-markdown
```
### Via [Git Submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules)
```bash
git subomdule add https://github.com/AegisJSProject/aegis-modal [:destination]
```
## Using [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
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:
### Short & Basic
```html
<script type="importmap">
{
"imports": {
"@aegisjsproject/": "https://unpkg.com/@aegisjsproject/"
}
}
```
### More detailed & with versions
```html
{
"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 ...
```html
{
"imports": {
"@aegisjsproject/": "/node_modules/@aegisjsproject/"
}
}
```
## Example
```html
Lorem Ipsum
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.
```