es6dialog

ES6 Dialog is a minimal and easy-to-use dialog plugin, which uses the <dialog> html element. It uses some ES6 javascript features, so the build file is Babel-ized.

How to

1. Download the es6dialog.js script and include es6dialog.js in your webpage.

   <script src="es6dialog.js"></script>

   Or install via npm install es6dialog --save or yarn add es6dialog --save and import it:

   import dialog from "es6dialog"
   // Note: you will still need to manually import the es6dialog.(s)css file in your project

2. An ES6 Dialog can be triggered as follows :

   HTML triggered

   import dialog from "es6dialog"
   dialog.init() // Adds a listener on all the .js-dialog links

   <!-- This js-dialog element targets the data-dialog value -->
   <a href="#" class="js-dialog" data-dialog="myDialog">Show dialog</a>
   
   <dialog id="myDialog">
     <h2>My Dialog</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
   </dialog>

   JS triggered (import/require needed):

   import { es6Dialog } from "es6dialog"
   myDialog = new es6Dialog(element).open()

   JS triggered through Window Object (no import/require needed):

   <script src="es6dialog.min.js"></script>

   new window.es6Dialog(myDialog).open()

Demo with code examples

Can be seen here.

JS API - methods

Note: You will need to import/require es6dialog in order to use these methods.

dialog.init(userSettings, callback)

The dialog.init() will automatically detect all the html elements which have the .js-dialog class, and will open the matching dialog on user's click.

dialog.init();

Note: you can set your own settings like that :

dialog.init({
  selector: "js-customDialog",
  width: "500px"
}, () => {
  console.log('Callback')
});

open(callback)

The open() method enables you to trigger a dialog element.

const element = document.querySelector("#amazingDialog")
// The simple way
const amazingDialog = new es6Dialog(element)
amazingDialog.open()

// Or the advanced way
const bigFixedDialog = new es6Dialog(element, {
  width: "1000px",
  fixed: true
})
bigFixedDialog.open()

The callback is optional.

close(callback)

The close() method closes the dialog :

bigFixedDialog.close()

The callback is optional.

---

Here is the list of settings :

• selector (default: ".js-dialog")
• closeText (default: inline svg)
• showClose (default: true)
• scroll (default: true)
• height (default: "auto")
• width (default: "600px")
• shadow (default: false)
• fixed (default: (false)
• customClass (default: null)