Crear ventanas modales simples con kbModal. js
| Autor: | O-Zone |
|---|---|
| Views Total: | 1,722 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 23, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
En este post vamos a crear una simple & ventana modal básica basada en JavaScript y CSS3 transiciones que se deslizan hacia fuera desde la parte superior de la página. Haga clic en el botón ' x ' o área en blanco de la superposición se cerrará la ventana modal. Funciona muy bien con los navegadores modernos e incluso los viejos navegadores IE como IE 6/7/8/9.
Uso básico
Cargue el script kbModal. js en el documento HTML.
<script src="kbModal.js"></script>
El CSS básico para estilo y animar la ventana modal.
@media screen and (max-width: 767px) {
.dkKbModalDialog {
width: auto;
margin: 5px;
}
}
@media screen and (min-width: 768px) {
.dkKbModalDialog {
width: 744px;
margin: 30px auto;
}
}
.dkKbModalOpen {
overflow: hidden;
}
.dkKbModalOverlay {
position: fixed;
z-index: 9000;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #000;
}
.dkKbModalOverlay.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalOverlay.dkKbShown {
opacity: .8;
filter: alpha(opacity=80); /* IE8 */
}
.dkKbModalOuterContainer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9010;
overflow: auto;
display: none;
}
.dkKbModalContainer {
box-sizing: border-box;
}
.dkKbModalContainer .dkKbModalDialog {
z-index: 9900;
}
.dkKbModalContainer.dkKbFade {
opacity: 0;
-webkit-transition: opacity 150ms linear;
-moz-transition: opacity 150ms linear;
-o-transition: opacity 150ms linear;
transition: opacity 150ms linear;
filter: alpha(opacity=0); /* IE8 */
}
.dkKbModalContainer.dkKbShown {
opacity: 1;
}
.dkKbModalDialog {
position: relative;
background-color: #eee;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
}
.dkKbModalHeader {
margin-top: .5em;
}
.dkKbModalBody {
overflow: auto;
}
.dkKbModalContainer.dkKbFade .dkKbModalDialog {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 300ms ease-out;
-moz-transition: -moz-transform 300ms ease-out;
-o-transition: -o-transform 300ms ease-out;
transition: transform 300ms ease-out;
}
.dkKbModalContainer.dkKbShown .dkKbModalDialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
.dkKbCloseButton {
float: right;
margin: 10px;
margin-top: -2px;
cursor: pointer;
font-size: 120%;
-webkit-appearance: none;
border: 0;
color: #000;
opacity: .2;
filter:alpha(opacity:50);
background: transparent;
font-weight: bold;
} Cree un botón para alternar una ventana modal.
<button class="dkKbTurnOnModal">Click me!</button>
