JSPM – dialog-polyfill@0.4.4

Package Exports

dialog-polyfill
dialog-polyfill/dialog-polyfill.css
dialog-polyfill/dialog-polyfill.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dialog-polyfill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Position

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%);
}