Ventana modal bastante simple en CSS puro
| Autor: | jreyes88 |
|---|---|
| Views Total: | 3,101 |
| Sitio oficial: | Ir a la web |
| Actualizado: | March 6, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Una librería CSS simple y muerta que te permite crear ventanas modales usando CSS/CSS3 puro. Impulsado por : de destino y : antes de pseudo clases. Animado con transiciones y transformaciones CSS3.
Funcionamiento
Cargue el archivo CSS principal modal. CSS en la sección Head de su documento.
<link rel="stylesheet" href="css/modal.css">
Cree el contenido modal como este:
<div class="modal" id="demo"> <div class="modal-container"> <p>I love cats</p> <a href="#modal-close">Close</a> </div> </div>
Cree un vínculo para alternar la ventana modal.
<a href="#demo">demo</a>
Eso es todo. Reemplace los estilos CSS predeterminados a su gusto.
p { margin-top: 0; }
.modal-container {
position: fixed;
background-color: #fff;
width: 70%;
max-width: 400px;
left: 50%;
padding: 20px;
border-radius: 5px;
-webkit-transform: translate(-50%, -200%);
-ms-transform: translate(-50%, -200%);
transform: translate(-50%, -200%);
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
}
