Stackable modal popup con efecto de desenfoque-PopBox. js

Vista prévia

Descripción

PopBox. js es un plugin de JavaScript pequeño y libre de dependencia para crear popups modales apilables con un efecto de desenfoque superponiendo el contenido principal.

Funcionamiento

Para empezar, primero debe cargar los siguientes archivos JavaScript y CSS en el documento.

<link href="popbox/popbox.css" rel="stylesheet">
<script src="popbox/popbox.js"></script>

Inicialice el PopBox. js y habilite el efecto de desenfoque.

var myPopbox =  new Popbox({
    blur: true // default: false
});

Crear el popup modal con un botón de cierre.

<div data-popbox-id="modal-example" class="popbox">

<div class="popbox_container">


<p class="heading">Modal Title</p>


<p class="text">



Modal Content


</p>


<button data-popbox-close="modal-example" class="danger">Close</button>

</div>
</div>

Crear un botón (o cualquier otro elemento de desencadenador) para alternar la ventana emergente modal.

<button data-popbox-target="modal-example">Launch The Modal</button>

También puede insertar el botón de alternancia en el contenido modal. Para que pueda abrir varios popups modales en la misma página.

<div data-popbox-id="modal-example" class="popbox">

<div class="popbox_container">


<p class="heading">Modal Title</p>


<p class="text">



Modal Content


</p>


<button data-popbox-close="modal-example" class="danger">Close</button>


<button data-popbox-target="modal-another">Open another</button>

</div>
</div>

<div data-popbox-id="modal-another" class="popbox">

<div class="popbox_container">


<p class="heading">Modal Title</p>


<p class="text">



Modal Content


</p>


<button data-popbox-close="modal-another" class="danger">Close</button>

</div>
</div>

Determine si desea mostrar la superposición de fondo.

var myPopbox =  new Popbox({
    overlay: true
});

Abra & cierre el popup modal mediante programación.

// open the modal
myPopbox.open('modalName');

 // close the modal
myPopbox.close('modalName');


// close all modal popups
myPopbox.clear();