iOS Style Dialog Web Component – pure-dialog

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:

04/15/2025

• v1.6.1: Bugfix

03/25/2025

• v1.6.0: Update

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

The post iOS Style Dialog Web Component – pure-dialog appeared first on CSS Script.