Modern Modal Component With JavaScript And Dialog Element – es6dialog

Category: Javascript , Modal & Popup | August 21, 2019
Author: oscar-marion
Views Total: 69
Official Page: Go to website
Last Update: August 21, 2019
License: MIT


Modern Modal Component With JavaScript And Dialog Element – es6dialog


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 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>

Initialize the es6dialog.


Open the modal dialog.

// 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
  allowScroll: true,
  height: "auto",
  width: "600px",
  fixed: false,
  shadow: false

Trigger an event after the dialog is activated.

  // options here
  () => {

You Might Be Interested In:

Leave a Reply