HTML5 Dialog Element Polyfill

Category: Javascript , Modal & Popup | January 17, 2018
Author: GoogleChrome
Views Total: 319
Official Page: Go to website
Last Update: January 17, 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();
};

Leave a Reply