Forstajs-dialog-polyfill NPM

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

You can optionally install via NPM-

$ npm install forstajs-dialog-polyfill

This polyfill works on modern versions of all major browsers. It also supports IE9 and above.

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.
Begin using the dialog.

require('forstajs-dialog-polyfill')

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

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

8 years ago

8 years ago