9805f3fc2b
|
||
|---|---|---|
| tests | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
| dialog-polyfill.css | ||
| dialog-polyfill.js | ||
| index.js | ||
| package.json | ||
| suite.js | ||
| test.html | ||
README.md
dialog-polyfill.js is a polyfill for <dialog> and <form method="dialog">.
Check out some demos!
<dialog> is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use.
This could be useful to block a user's interaction until they give you a response, or to confirm an action.
See the HTML spec.
Usage
Installation
You may optionally install via NPM -
$ npm install dialog-polyfill
There are 3 ways that you could include the dialog polyfill
- include
dialog-polyfill.jsscript directly in your HTML, which exposes a globaldialogPolyfillfunction. import(es modules)require(commonjs/node)
import dialogPolyfill from 'dialog-polyfill' // modern es modules approach
// *OR*
const dialogPolyfill = require('dialog-polyfill') // commonjs/node approach
Supports
This polyfill works on modern versions of all major browsers. It also supports IE9 and above.
Steps
- Include the CSS in the
<head>of your document, and the Javascript anywhere before referencingdialogPolyfill. - 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!
Script Global Example
<head>
<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 src="dialog-polyfill.js"></script>
<script>
var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
// Now dialog acts like a native <dialog>.
dialog.showModal();
</script>
</body>
::backdrop
In native <dialog>, the backdrop is a pseudo-element.
When using the polyfill, the backdrop will be an adjacent element:
dialog::backdrop { /* native */
background-color: green;
}
dialog + .backdrop { /* polyfill */
background-color: green;
}
Limitations
In the polyfill, modal dialogs have limitations-
- They should not be contained by parents that create a stacking context, see below
- The browser's chrome may not always be accessible via the tab key
- Changes to the CSS top/bottom values while open aren't retained
Stacking Context
The major limitation of the polyfill is that dialogs should not have parents that create a stacking context.
The easiest way to solve this is to move your <dialog> element to be a child of <body>.
If this isn't possible you may still be able to use the dialog. However, you may want to resolve it for two major reasons-
- The polyfill can't guarantee that the dialog will be the top-most element of your page
- The dialog may be positioned incorrectly as they are positioned as part of the page layout where they are opened (defined by spec), and not at a fixed position in the user's browser.
To position a dialog in the center (regardless of user scroll position or stacking context), you can specify the following CSS-
dialog {
position: fixed;
top: 50%;
transform: translate(0, -50%);
}
Extensions
Focus
The WAI-ARIA doc suggests returning focus to the previously focused element after a modal dialog is closed.
However, this is not part of the dialog spec itself.
See this snippet to add this, even to the native dialog.