29b088d4ed
|
||
|---|---|---|
| tests | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
| bower.json | ||
| dialog-polyfill.css | ||
| dialog-polyfill.js | ||
| package.json | ||
| suite.js | ||
| test.html | ||
README.md
dialog-polyfill.js is a polyfill for <dialog>.
Demo
<dialog> is an element for a popup box in a web page, including a modal option. See
more information and demos
and the
HTML spec.
Usage
Installation
You may optionally install via NPM or Bower-
$ npm install dialog-polyfill
$ bower install dialog-polyfill
Supports
This polyfill works on modern versions of all major browsers. It also supports IE9 and above.
Steps
- 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!
Example
<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>
::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