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:

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.

Javascript methods

I have exposed 2 methodes:


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);

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);

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);


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!