Ventana modal animada CSS3 minimalista

Vista prévia

Descripción

Una biblioteca de JavaScript sencilla y ligera que se utiliza para mostrar varias ventanas modales con animaciones CSS3 en la Página Web.

Funcionamiento

Incluya tanto modal. CSS como modal. min. js en la Página Web.

<link href="assets/css/modal.css" rel="stylesheet">
<script src="assets/js/modal.min.js"></script>

Cree la ventana modal.

<div class="modal" id="demo">

<div class="modal-title">


Modal Title

</div>

<div class="modal-body">


Modal Content

</div>
</div>

Desencadene la ventana modal.

<button onclick='modal.show("demo")'>Show first</button>

Oculte la ventana modal manualmente.

<button onclick='modal.hide()'>Hide</button>

Todas las configuraciones predeterminadas.

isInited: false,
// CSS rules
modalBox: '.modal-box', // Container for all modal stuff
modalsClass: '.modal', // Class assigned to each modal window box
modalsCont: '.modal-wrapper', // Place, where modals will be put after collecting
// Animation classes
show: { // Showing classes

stat: 'opened', // static

dyn: 'show', // dynamic

swch: 'switch', // switch to
},
hide: { // Hiding classes

stat: 'closed', // static

dyn: 'hide' // dynamic
},
// Class added when modals has been collected
loadCls: 'loaded',
// Key code. Null to disable
hideByKey: 27,
// URL hash prefix for modal anchor. Null to disable
// Example:
 // urlPrefix: 'M_'
// site.com/page.html#M_someModal will open modal with id "someModal" after init of the script.
urlPrefix: ''

Registro de cambios

v1.5 (08/14/2018)

• actualizar