Z-Modal

05 sept 2015

What is z-modal?

Z-modal is a little javascript plugin that allows you create stylish modals. You will be able to put texts or html in the modals content and customize the title and the buttons.

It is written in vanillaJs, so that you don't need any third party libraries or frameworks.

---

Default behaviour

Without any options, here is the default behaviour of the plugin:

Show me a modal please !

var btnTest = document.getElementById('demo1');
var demo;
btnTest.addEventListener('click', function() {
  demo = new ZMODAL();
})

---

The options

The plugin's options are written in a javascript object, they will overwrite the default settings.

• title: (Default: "Z-MODAL") This is the title that will be inserted in the modal header section.
• content: Here you can use a string or an html node that will be inserted as a content in the modal.
• closeBtn: (Default: true) This is a boolean witch is used to say if the "close" button will appear.
• buttons: The array of objects representing the buttons that will be displayed at the bottom of the modal. There are options for that too:
  • label: The text that will be displayed inside the button
  • half: (Default: false) Used to decide if the button is 100% or 50% wide
  • callback: A function that will fire after clicking the button (the modal will always close automatically!)
• className: (Default: "") Add here some classNames if you want to apply some more styles. [SPACE separated]
• autoload: (Default: true) Tells the plugin to open the modal automatically or to open on the method call

---

Javascript methods

I have exposed 2 methodes:

• ZMODAL.open(): This will be used just if the "autoload" option is setted at "false"
• ZMODAL.close(callback): Here, You are able to close the modal and apply a callback (must be a function)

---

Exemples

Without buttons and without close button

var btndemo2 = document.getElementById('demo2');
var demo2;
var options2 = {
  title : "Demo 2",
  content : 'You can close the modal by clicking the overlay...',
  closeBtn : false,
  buttons : []
};
btndemo2.addEventListener('click', function() {
  demo = new ZMODAL(options2);
});

Demo 2

---

With html inside and 2 buttons

var btndemo3 = document.getElementById('demo3');
var htmlContent = document.createElement('p');
htmlContent.innerHTML = "This content is an HTML node!";
var demo2;
var options3 = {
  title : "Demo 3",
  content : htmlContent,
  buttons : [
    {
      label: "Cancel",
      half: true
    },
    {
      label: "Ok",
      half: true,
      callback: function() {
        alert("you are awesome!");
      }
    }
  ]
};
btndemo3.addEventListener('click', function(){
  demo = new ZMODAL(options3);
});

Demo 3

Full width button and called with "open" method

var btndemo4 = document.getElementById("demo4");
var demo4;
var options4 = {
  title: "Demo 4",
  content: "This works too ;-)",
  buttons: [
    {
      label: "Yeah!",
      half: false
    }
  ],
  autoload: false
}
btndemo4.addEventListener('click', function(){
  demo4 = new ZMODAL(options4);
  demo4.open();
});

Demo 4

---

More...

I developed this javascript plugin for me and wanted to share it with you because I think it can be usefull.

I don't guarantee that it is perfect but I tried to do my best with only vanilla javascript and basic css

Contributions, forks, pull requests, comments... are welcome!