El componente modal más simple en JavaScript puro

Vista prévia

Descripción

Un plugin de JavaScript ultraligero que le ayuda a crear ventanas modales para sus aplicaciones Web.

Características

• 3 tamaños: normal, pequeño y grande.
• Puede ser desencadenada por cualquier elemento.
• Permite cerrar la ventana modal con el atributo ' Data-descartar ' o cuando se hace clic en el telón de fondo.

Funcionamiento

Cargue la hoja de estilos modal. CSS y archivo JS modal. js en la página HTML.

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

Cree el contenido modal de la siguiente manera:

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

<div class="modal-window">



<h3>Normal Modal</h3>

</div>
</div>

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

<div class="modal-window large">



<h3>Large Modal</h3>

</div>
</div>

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

<div class="modal-window small">



<h3>Small Modal</h3>

</div>
</div>

Crear elementos de desencadenador modal:

<button data-target="simpleModal_1" data-toggle="modal">Basic Modal</button>
<button data-target="simpleModal_2" data-toggle="modal">Large Modal</button>
<button data-target="simpleModal_3" data-toggle="modal">Small Modal</button>

Si desea insertar un botón de cierre dentro de la ventana modal:

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

<div class="modal-window">


<h3>Dismiss with a custom button</h3>


<button data-dismiss="modal">Close</button>

</div>
</div>

Registro de cambios

09/21/2018

• Solucionado el problema que impedía que el clic funcione en otros elementos