ffuubarbuzz/dialog-polyfill

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 position absolute or relative elements)
- 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
Anchored positioning is not implemented, but the native <dialog> in Chrome doesn't have it either

ffuubarbuzz / dialog-polyfill