Pop Notify
A modern custom element to create modals and dialogs
Nice features
- Use native dialog when available, and load a polyfill automatically for safari < 15.4 and firefox < 98
- Compatible with any framework
- Fully standalone
- Fully accessible
- Binds button automatically with
data-dialog - Light dismiss
- Nice animations
Why use dialogs ?
Modern dialogs have super powers that cannot be easily replicated with userland javascript.
- Inert background
- Trapping focus
Why use a custom element
Because dialogs are not supported in safari < 15.4 and firefox < 98. Binding the polyfill is tricky. Also, you might want to have your buttons bound without custom js (onclick="this.closest('dialog').close('cancel')" anyone?) or inline scripts. And you might even enjoy some nice styling :-)
How to use
Using simple html:
<body>
...
<pop-modal id="myModal"> Hi there! </pop-modal>
<button data-dialog="myModal">Open it</button
><!-- no js was used :-) -->
...
</body>More examples
Using a mega modal that goes to the bottom in mobile view:
<pop-modal id="megaModal" mega> ... </pop-modal>Disabling backdrop
<pop-modal id="modalWithoutBackdrop" backdrop="false"> ... </pop-modal>No light dismiss
<pop-modal id="noLightDismissModal" dismissible="false"> ... </pop-modal>Config
Simply call the static configure method.
customElements.whenDefined("pop-modal").then(() => {
customElements.get("pop-modal").configure({});
});| Name | Type | Description |
|---|---|---|
| closeSelector | String |
Selector to find close button |
Demo
Check out demo.html or a simple code pen below
https://codepen.io/lekoalabe/pen/NWoXRaV
Browser supports
Modern browsers (edge, chrome, firefox, safari... not IE11). Add a warning if necessary.