Vanilla JavaScript Alert/Confirm Modal Dialog Library – Modal.js

Preview:

Description:

Modal.js is a vanilla JavaScript library for creating highly customizable alert and/or confirmation dialog boxes using plain JavaScript.

More features:

• Custom confirm/cancel buttons.
• Binds custom keys to confirm/cancel actions.
• Supports HTML content.

How to use it:

To get started, include the Modal.css and Modal.js files on the page.

<link href="modal.css" rel="stylesheet">
<script src="modal.js"></script>

Create an alert dialog.

var myAlert = new Modal({
    title: "Alert Title",
    body: "<center>Alert Message Here</center>",
    buttons: [
      {
        content: "Okay",
        classes: "YOUR-OWN-CLASSES",
        bindKey: 13, /* Enter Key */
        callback: function(modal){
          console.log("You just accepted the Alert Modal");
          modal.hide();
        }
      }
    ],
    close: {
      callback: function(modal){
        console.log("You just closed the Alert Modal");
        modal.hide();
      }
    }
});

Create a confirmation dialog.

var myConfirm = new Modal({
    title: "Confirm Dialog",
    body: "<center>Confirm Message</center>",
    buttons: [
      {
        content: "Cancel",
        classes: "YOUR-OWN-CLASSES",
        bindKey: false, /* no key! */
        callback: function(modal){
          modal.hide();
        }
      },{
        content: "Confirm",
        classes: "YOUR-OWN-CLASSES",
        bindKey: false,
        callback: function(modal){
          modal.hide();
        }
      }
    ],
    close: {
      closable: false
    }
});

Show the dialog boxes.

myAlert.show();
myConfirm.show();

All default configurations.

{
  title: "Default modal title",
  body: "This is the default body. It can include <strong>html</strong>. You can also leave it empty so we will hide it :).",
  buttons: [
      /*No buttons by default.*/
  ],
  close: {
      closable: true,
      location: "in",
      bindKey: 27,
      callback: function(modal){
          modal.hide();
      }
  },
}

Available callback functions.

var myAlert = new Modal({
    onShow:     function(modal){},
    onHide:     function(modal){ modal.destroy(); },
    onCreate:   function(modal){},
    onDestroy:  function(modal){}
});