Basic modal popup con vanilla JavaScript y HTML5-Modalzinha. js
| Autor: | ferspeak |
|---|---|
| Views Total: | 3,315 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 15, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Modalzinha. js es un plugin de JavaScript de vainilla extremadamente ligero que se utiliza para mostrar una ventana emergente modal simple y descartable usando HTML simple.
¿Cómo funciona?
Cargue el archivo de JavaScript modalzinha. js al final del documento.
<script src="modalzinha.js"></script>
Cree el contenido modal siguiendo la estructura HTML como esta:
<div class="modal-wrapper" data-modal="wrapper"> <div class="modal-content"> <button data-modal="close">×</button> Modal Content </div> </div>
Cree un botón de desencadenador con el atributo Data-modal = "Open" .
<button data-modal="open">Lanuch</button>
Estilo de la ventana emergente modal en el CSS.
.modal-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.7);
transition: .4s;
visibility: hidden;
opacity: 0;
z-index: 100;
}
.modal-content {
max-width: 400px;
width: 100%;
position: absolute;
top: 30%;
left: 0;
right: 0;
margin: 0 auto;
z-index: 10;
background-color: #1ABC9C;
border-radius: 5px;
color: #fff;
}
.modal-opened {
opacity: 1;
visibility: visible;
}
