pure-dialog
A small (3.3kb), self-contained, pure JavaScript modal dialog designed to simplify the creation of dialogs in Web and Hybrid Mobile apps.
Is this project worth a star?
Becomes:
Try the demo
Table of Contents
How to use
Add dist/pure-dialog.min.js and dist/pure-dialog.min.css files to your page.
If your browser does not support Web Components you will need to add the document.registerElement polyfill.
In HTML
Is this project worth a star?
In JavaScript
// create the elementvar dialog = document; // set its propertiesdialogid = 'example';dialogtitle = 'Pure Dialog Demo';dialogcontent = 'Hello there';dialogbuttons = 'Yes, No';dialogbuttonValueSeparator = ',';dialogcloseButton = false; // append to DOMdialog; // show as a modaldialog;
Methods
Assuming var dialog = document.getElementById('example')
:
dialog; // show the dialogdialog; // show the dialog as a modaldialog; // close the dialogdialog; // add the dialog to the DOM (not require if using HTML literal)dialog; // remove the dialog from the DOM
Events
All pure-dialog events bubble up so it is possible to listen for pure-dialog events at the root of the DOM. Assuming var dialog = document.getElementById('example')
:
pure-dialog-button-clicked
// detect button clicks on the #example elementdialog; // or detect button click on all dialogs in the DOMdocument;
pure-dialog-close-clicked
// detect closed clickeddialog;
pure-dialog-opening
// detect dialog is openingdialog;
pure-dialog-opened
// detect dialog has openeddialog;
pure-dialog-closing
// detect dialog is closingdialog;
pure-dialog-closed
// detect dialog has closeddialog;
pure-dialog-appending
// detect dialog is appending to DOMdialog;
pure-dialog-removing
// detect dialog removed from DOMdialog;
pure-dialog-ready
// executes when the element is ready for interactiondialog;
TODO: document these events
- pure-dialog-body-rendered
- pure-dialog-title-rendered
- pure-dialog-buttons-rendered
Properties and attributes
JS Property | HTML Attribute | Description | Type | Default |
---|---|---|---|---|
title | data-title |
Get/set the dialog title | string | empty |
buttons | buttons |
Get/set comma separated list of buttons | string | empty |
buttonValueSeparator | button-value-separator |
Get/set character to use to split button values | string | , |
closeButton | close-button |
If true, renders a close button | boolean | false |
removeOnClose | remove-on-close |
If true, remove dialog from DOM on close | boolean | false |
autoClose | auto-close |
auto close when button clicked | boolean | true |
content | n/a | Injects HTML into body of dialog | string | empty |
body | n/a | Gets dialog inner body tag | object | null |
Assuming var dialog = document.getElementById('example')
:
dialogtitle = 'Pure Dialog Demo'; // set titledialogbuttons = 'Absolutely|No'; // set buttonsdialogbuttonValueSeparator = '|'; // button values are separated by pipedialogcloseButton = true; // set close button visibilitydialogremoveOnClose = true; // remove dialog from DOM on closedialogautoClose = false; // do not auto close when button clickeddialogcontent = 'Hello World!'; // set dialog body HTMLdialogbodytextContent = 'Hello World'; // set inner text via body tag
Styling
pure-dialog
was designed to be light and so only produces the following output, making it easy to style:
Pure Dialog Demo Is this project worth a star?
To change the style of a particular button, you could use its value as a selector:
Unit Tests
- Checkout using
git clone https://github.com/john-doherty/pure-dialog
- Navigate into project folder
cd pure-dialog
- Install dependencies
npm install
- Run the tests
npm test
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request
Star the repo
If you find this useful, star the repo, it motivates me to continue development :)
History
For change-log, check releases.
License
Licensed under MIT License © John Doherty