HTML5 Dialog Element Polyfill

Category: Javascript , Modal & Popup | October 25, 2018
Author:GoogleChrome
Views Total:2,900 views
Official Page:Go to website
Last Update:October 25, 2018
License:MIT

Preview:

HTML5 Dialog Element Polyfill

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

You Might Be Interested In:


Leave a Reply