Modern Modal Component With JavaScript And Dialog Element – es6dialog

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