iOS Style Modal Dialog Web and Mobile Component

Pure Dialog, small Dialog Box (less than 3.3KB), standalone, modular, pure JavaScript designed to simplify creating dialog boxes in hybrid web and mobile applications.

Pure Dialog is a web component for creating customizable alert/confirmation style popups on a web / mobile app.

How to make use of it:

Install it by way of NPM:

$ npm install pure-dialog --save

Include the document-register-element polyfill within the doc.

<script src="polyfills/document-register-element.js"></script>

Include the pure-dialog element’s JavaScript and CSS within the doc.

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

Create the dialog.

<pure-dialog id="example" title="Pure Dialog Demo" buttons="Absolutely, No, Maybe">
  Is this project worth a star?
</pure-dialog>

Show the dialog on the web page.

document.querySelector('#example').show()

Show the dialog as a modal dialog.

document.querySelector('#example').showModal()

Customize the dialog popup.

var dialog = document.createElement('pure-dialog');

// set its properties
dialog.id = 'example';
dialog.title = 'Pure Dialog Demo';
dialog.innerHTML = 'Is this project worth a star?';
dialog.buttons = 'Absolutely, No';
dialog.closeButton = false;
dialog.autoClose = false;

API strategies.

// show the dialog
dialog.show();        

// show the dialog as a modal
dialog.showModal(); 

// close the dialog
dialog.close();       

// add the dialog to the DOM (not require if using HTML literal)
dialog.appendToDOM(); 

// remove the dialog from the DOM
dialog.remove();

Events.

// listen for button clicks
document.addEventListener('pure-dialog-button-clicked', function(e) {
  console.log(e.type);    // event name
  console.log(e.target);  // pure-dialog HTML element
  console.log(e.detail);  // button clicked 
  // use e.preventDefault() to cancel event
});

// detect closed clicked
document.addEventListener('pure-dialog-close-clicked', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from closing by using e.preventDefault()
});

// detect dialog is opening
document.addEventListener('pure-dialog-opening', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from opening by using e.preventDefault()
});

// detect dialog has opened
document.addEventListener('pure-dialog-opened', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
});

// detect dialog is closing
document.addEventListener('pure-dialog-closing', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from closing by using e.preventDefault()
});

// detect dialog has closed
document.addEventListener('pure-dialog-closed', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
});

// detect dialog is appending to DOM
document.addEventListener('pure-dialog-appending', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from been inserted by using e.preventDefault()
});

// detect dialog removed from DOM
document.addEventListener('pure-dialog-removing', function(e) {
  console.log(e.type);     // event name
  console.log(e.target);   // pure-dialog HTML element
  // stop the dialog from been removed by using e.preventDefault()
});

iOS Style Dialog Web Component, material design web dialog, pure dialog plugin/Github