dialog-polyfill.js is a polyfill for <dialog>.
<dialog> is an element for a popup box in a web page, including a modal option. See
more information and demos (needs a browser with native support, like Chrome)
and the
HTML spec.
You may optionally install via NPM or Bower-
$ npm install dialog-polyfill
$ bower install dialog-polyfill
This polyfill works on modern versions of all major browsers. It also supports IE9 and above.
- 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. This polyfill won't replace native support. - Use your
<dialog>elements!
<head>
<script src="dialog-polyfill.js"></script>
<link rel="stylesheet" type="text/css" href="dialog-polyfill.css" />
</head>
<body>
<dialog>
I'm a dialog!
<form method="dialog">
<input type="submit" value="Close" />
</form>
</dialog>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>.
dialog.showModal();
</script>
</body>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;
}-
Modal dialogs have limitations-
- They should be a child of
<body>or have parents without layout (aka, no positionabsoluteorrelativeelements), see below for more - 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
One major limitation of the polyfill is that dialogs must have parents without layout. This is required as the spec positions dialogs as part of the page layout where they are opened, and not positioned at a fixed position in the user's browser.
You can use a fixed layout, which allows the dialog to be positioned anywhere, by specifying the following CSS (works for both native and polyfill)-
dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}