Lightweight Modal & Dialog JavaScript Library – Z-MODAL

Preview:

Description:

Z-MODAL is a tiny and simple-to-use JavaScript library that makes it easy to create modal windows and dialog popups on your web projects. Built with vanilla Javascript and without any 3rd dependencies.

How to use it:

Import the z-modal.min.css stylesheet into the head section of the web page.

<link rel="stylesheet" href="z-modal/z-modal.min.css">

Import the z-modal.min.js JavaScript file at the end of the document so the pages load faster.

<script src="z-modal/z-modal.min.js"></script>

Display a modal window with default modal title and content.

new ZMODAL();

Create a confirm dialog with custom action buttons.

var options = {
    title : "Demo",
    content : htmlContent,
    buttons : [
      {
        label: "Cancel",
        half: true
      },
      {
        label: "Ok",
        half: true,
        callback: function (){
          alert("you are awesome!");
      }}
    ]
};
new ZMODAL(options)

All default options.

{
  className : "",
  title : "Z-MODAL",
  content : '<h1>Congratulations!!!</h1>\
      <p>You are using the realy awesome Z-Modal javascript plugin. <b>Thank You!</b></p>\
      <p>Author: <a href="http://caradeuc.info/">Benjamin Caradeuc</a></p>',
  showOverlay: true,
  autoload:true,
  closeBtn : true,
  onClose:null,
  buttons : [
      { label: "ok", className: '', half: false, closeOnClick: true, callback:function() { console.log('Thank you for using Z-Modal plugin.'); } }
  ]
}

Changelog:

08/01/2018

• Title and content are now optional; z-modal-header, z-modal-content and z-modal-footer are just rendered if it was content; Added option to show or not the overlay