Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Polyfill for the <dialog> element
HTML JavaScript CSS
branch: master

Merge pull request #43 from blanchg/blanchg-supportsCustomEvent

Add IE 10+ compatibility to supportsCustomEvent
latest commit 7f75fde4da
Sam Thorogood samthor authored

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.

Usage

Installation

You may optionally install via Bower-

$ 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!</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,
#mydialog::backdrop {
  background-color: green;
}

Limitations

  • Modailty isn't bulletproof. For example, accessKey can be used to focus inert elements.
    • While focus is inside a <dialog>, the browser's chrome cannot be tabbed to.
  • 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.
Something went wrong with that request. Please try again.