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.

• allowScroll: 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

dialog.create(myDialog,{
  allowScroll: true,
  height: "auto",
  width: "600px",
  fixed: false,
  shadow: false
});

Trigger an event after the dialog is activated.

dialog.create(myDialog,{ 
  // options here
},
  () => {
    console.log('Callback')
  });