forstajs-dialog-polyfill
v0.4.2-a
Published
ES6 importable polyfill for the dialog element
Downloads
4
Readme
forstajs-dialog-polyfill.js is a polyfill for <dialog>.
<dialog> is an element for a popup box in a web page. See
more information and demos
and the
HTML spec.
Usage
Installation
You can optionally install via NPM-
$ npm install forstajs-dialog-polyfillSupports
This polyfill works on modern versions of all major browsers. It also supports IE9 and above.
Usage
- Include the JavaScript followed by the CSS in the
<head>of your document. - Create your dialog elements within the document. See limitations for more details.
- Register the elements using
dialogPolyfill.registerDialog()passing it one node at a time. - Begin using the dialog.
Example
require('forstajs-dialog-polyfill')::backdrop
In native <dialog>, the backdrop is a pseudo-element:
#mydialog::backdrop {
background-color: green;
}When using the polyfill, the backdrop will be an adjacent element:
#mydialog + .backdrop {
background-color: green;
}
#mydialog::backdrop {
background-color: green;
}Limitations
Modal dialogs have limitations-
- They should be a child of
<body>or have parents without layout (aka, no positionabsoluteorrelativeelements) - The browser's chrome may not be accessible via the tab key
- Stacking can be ruined by playing with z-index
- Changes to the CSS top/bottom values while open aren't retained
- They should be a child of
Anchored positioning is not implemented, but the native
<dialog>in Chrome doesn't have it either