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.