Easy Z modal - Simple and dynamic plugin dialog boxes

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>

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

Confirm

You confirm?

Responsive modal

Simple modal

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!

Easy Z modal v0.1.3

Get Start

Examples

Options

Data Attributes

Events

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