dialog-polyfill

Polyfill for the HTML dialog element

Перейти к файлу

Austin Matzko b6456d6930 When older IEs throw an error at setting the background-color using RGBA, use something they understand.		2014-01-02 12:55:26 -05:00
tests	Make the backdrop fixed positioned, matching the spec.	2013-10-30 20:05:27 +09:00
LICENSE	Initial commit	2013-07-26 10:29:52 +09:00
README.md	Add missing period	2013-07-26 12:01:49 -07:00
bower.json	tagged as 0.2.0	2013-12-17 23:07:31 +09:00
dialog-polyfill.css	Make the backdrop fixed positioned, matching the spec.	2013-10-30 20:05:27 +09:00
dialog-polyfill.js	When older IEs throw an error at setting the background-color using RGBA, use something they understand.	2014-01-02 12:55:26 -05:00

README.md

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.

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!</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;
}

With the polyfill, you do it like:

#mydialog + .backdrop {
  background-color: green;
}

Known limitations

Modality isn't bulletproof. For example, you can tab to inert elements.
The polyfill <dialog> should always be a child of <body>.
Polyfill top layer stacking can be ruined by playing with z-index.
The polyfill <dialog> does not retain dynamically set CSS top/bottom values upon close.
Anchored positioning is not implemented. The native <dialog> in Chrome doesn't have it either.