Author: | oscar-marion |
---|---|
Views Total: | 211 views |
Official Page: | Go to website |
Last Update: | October 10, 2019 |
License: | MIT |
Preview:

Description:
es6dialog is a modern modal component built using ES6 Object-Oriented programming and HTML5 <dialog> element.
How to use it:
Install & download the es6dialog package.
# Yarn $ yarn add es6dialog # NPM $ npm install es6dialog --save
Import the es6dialog module.
import dialog from "es6dialog"
Import the necessary stylesheet.
<link rel="stylesheet" href="./build/es6dialog.css">
Insert your own modal content into the dialog
element.
<dialog id="myDialog"> <h2>Dialog Title</h2> <p>Dialog Content</p> </dialog>
Initialize the es6dialog.
dialog.init()
Open the modal dialog.
dialog.create(myDialog); // or new window.globalDialog(myDialog).open();
Open the modal dialog with a trigger element.
<a href="#" class="js-dialog" data-dialog="myDialog">Launch</a>
Possible options to config the modal dialog.
- selector: default selector
- closeText: custom close icon
- scroll: allows page scroll when the dialog is activated
- height: the height of the dialog
- width: the width of the dialog
- fixed: makes the dialog always be visible on page scroll
- shadow: enables shadow
- elementClass: element class
dialog.create(myDialog,{ selector: ".js-dialog", closeText: `<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 212.982 212.982" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/></svg>`, scroll: true, height: "auto", width: "600px", fixed: false, shadow: false, elementClass: "dialog" }); // or dialog.init({ selector: ".js-dialog", closeText: `<?xml version="1.0" encoding="iso-8859-1"?><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 212.982 212.982" xml:space="preserve"><path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/></svg>`, scroll: true, height: "auto", width: "600px", fixed: false, shadow: false, elementClass: "dialog" });
Trigger an event after the dialog is activated.
dialog.create(myDialog,{ // options here }, () => { console.log('Callback') });
Close the dialog manually.
Dialog.close();
Changelog:
v1.3.5 (10/10/2019)
- Fix throw error on init if no .js-dialog elements in DOM from version 1.3
v1.3.3 (10/09/2019)
- Removes console.log()
v1.3.2 (10/09/2019)
- It’s now possible to close the dialog via the close() method
v1.2 (09/26/2019)
- Possible to customize settings on init()
- Removing isPolyfill parameter, now using it no matter what
- Cleaning the es6Dialog constructor by creating methods for almost everything. Now easier to maintain.
- Renaming allowScroll setting for scroll. Please rename it in your code as well
- Some extra security: now throwing error when dialog or selector are not found