Easy Z modal v0.1.3

Simple and dynamic plugin dialog boxes. Use your creativity and customize to your.

Github Download v0.1.3 .zip Download v0.1.3 .tar.gz
   

Get Start

<html>
    <head>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>        
    </head>
    <body>
        <button type="button" ezmodal-target="#example">Click here!</button>
        <div id="example" class="ezmodal">
            <div class="ezmodal-container">
                <div class="ezmodal-header">
                    <div class="ezmodal-close" data-dismiss="ezmodal">x</div>
                    Title text
                </div>
                <div class="ezmodal-content">
                    ...
                </div>
                <div class="ezmodal-footer">
                    <button type="button" data-dismiss="ezmodal">Close</button>       			
                </div>
            </div>
        </div>

        <script type="text/javascript" src="src/ezmodal.min.js"></script>        
    </body>
</html>
x
Simple modal

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?

Examples

Alert

Easy Z modal Alert example

x
Confirm

You confirm?

x
Responsive modal

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?

x
Simple modal

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?

Options

Option Values Description
width {Number|String}, Default: 500 Use 'Number' or 'small', 'medium', 'full' responsive width
closable {Boolean}, Default: true Place false to block the closing on click outside the modal
escClose {Boolean}, Default: true Closes the modal with the esc key
autoOpen {Boolean}, Default: false True to the modal automatically open

Data Attributes

Data attribute Using Description
ezmodal-width <div class="ezmodal" ezmodal-width="800"> Sets the width of the modal
ezmodal-closable <div class="ezmodal" ezmodal-closable="false"> Place false to block the closing on click outside the modal
ezmodal-escclose <div class="ezmodal" ezmodal-escclose="false"> Closes by pressing the ESC key
ezmodal-autoopen <div class="ezmodal" ezmodal-autoopen="true"> Check modal is visible

Events

Event Using Description Example
onShow
    $('#mymodal').ezmodal({
        'onShow': function () {
             --- 
        };
    });
    
Performs a function soon after opening the modal
x
Execute function when opening

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?

Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!

onClose
    $('#mymodal').ezmodal({
        'onClose': function () {
             --- 
        };
    });
    
Performs a function soon before closing the modal
x
Execute function after closing

Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?

Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!


Designed and built by Markus Lima.

:) Here to thank all the people who have contributed and will contribute to this project.

Code licensed under MIT.