Ligero modal & diálogo biblioteca JavaScript-Z-MODAL

Vista prévia

Descripción

Z-MODAL es una biblioteca de JavaScript pequeña y fácil de usar que facilita la creación de ventanas modales y popups de diálogo en sus proyectos Web. Construido con JavaScript vainilla y sin ninguna dependencia 3rd.

Funcionamiento

Importe la hoja de estilos z-modal. min. CSS a la sección Head de la Página Web.

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

Importe el archivo JavaScript z-modal. min. js al final del documento para que las páginas se carguen más rápido.

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

Mostrar una ventana modal con el título y el contenido modales predeterminados.

new ZMODAL();

Cree un diálogo de confirmación con los botones de acción personalizados.

var options = {


title : "Demo",


content : htmlContent,


buttons : [



{




label: "Cancel",




half: true



},



{




label: "Ok",




half: true,




callback: function (){





alert("you are awesome!");



}}


]
};

new ZMODAL(options)

Todas las opciones predeterminadas.

{

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.'); } }

]
}

Registro de cambios

08/01/2018

• Título y contenido son ahora opcionales; z-modal-encabezado, z-modal-contenido y z-modal-pie de página sólo se representan si estaba contento; Añadida la opción de mostrar o no la superposición