HTML5 Dialog Element Polyfill

Preview:

Description:

A JavaScript polyfill for the HTML5 <dialog> element to create interactive dialog UI components on all major browsers.

How to use it:

Insert the ‘dialog-polyfill.css’ and ‘dialog-polyfill.js’ into your document.

<link href="dialog-polyfill.css" rel="stylesheet">
<script src="dialog-polyfill.js"></script>

Create a native dialog element.

<dialog>
  <p>This is a dialog!</p>
  <button id="close">Close</button>
</dialog>

Register the dialog element and done.

var dialog = document.querySelector('dialog');
dialogPolyfill.registerDialog(dialog);
document.querySelector('#show').onclick = function() {
  dialog.show();
};
document.querySelector('#close').onclick = function() {
  dialog.close();
};

Changelog:

10/25/2018

• prevent loop onto documentElement