Lightweight Modal & Dialog JavaScript Library – Z-MODAL

Category: Javascript , Modal & Popup | August 1, 2018
Author: benavern
Views Total: 2,308
Official Page: Go to website
Last Update: August 1, 2018
License: MIT

Preview:

Lightweight Modal & Dialog JavaScript Library – Z-MODAL

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

You Might Be Interested In:

One thought on “Lightweight Modal & Dialog JavaScript Library – Z-MODAL

  1. ZeZeN

    Hey! thank you for sharing my work ! but why didn’t you ask before ? I’d be happy to share others of my projects here 🙂

    Reply

Leave a Reply