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
See Demo And Download
Official Website(john-doherty): Click Here
This superior jQuery/javascript plugin is developed by john-doherty. For extra Advanced Usages, please go to the official website.