JSPM – dialog-polyfill@0.4.2

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>.

<dialog> is an element for a popup box in a web page. 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.

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