Author: | john-doherty |
---|---|
Views Total: | 1,050 views |
Official Page: | Go to website |
Last Update: | September 28, 2020 |
License: | MIT |
Preview:

Description:
pure-dialog is a web component to create customizable, iOS-style alert/confirmation dialog popups on the web/mobile app.
Install it via NPM:
$ npm install pure-dialog --save
How to use it:
Include the document-register-element polyfill in the document.
<script src="polyfills/document-register-element.js"></script>
Include the pure-dialog component’s JavaScript and CSS in the document.
<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 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 methods.
// 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() });
Changelog:
09/28/2020
- v1.5.0: Changed .innerHTML property to .content (registerElement polyfill is unable to override innerHTML)
09/26/2020
- v1.4.5: fix innerHTML issue on Android 5.1
09/24/2020
- v1.4.1: update
08/28/2019
- v1.4.0: Revert “added internal status=opening|open|closing|closed attribute to make css animation easier”
11/11/2018
- v1.3.2: fixed button seperator issue
08/22/2018
- v1.3.0