HTML
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
‹a href=”#cerrar”›‹/a›
‹div id=”modalContent”›
‹h1›Soy una ventana modal‹/h1›
‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
‹a href=”#cerrar”›X‹/a›
‹/div›
‹/div›
CSS
/* Creamos unos estilos para el botón */
.btn{
position:relative;
padding:8px 16px;
font-family:'psychotik';
font-size:1.2em;
font-weight:normal;
color:#fff;
text-shadow:none;
border-radius:16px;
background:#00A6B6;
box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
background:#FF9C00;
box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
position:absolute;
top:50%;
left:50%;
z-index:6;
margin:-2% 0px 0px -150px;
float:left;
width:300px;
color:#fff;
line-height:22px;
padding:15px;
border-radius:5px;
background:#00A6B6;
border:1px solid #fff;
box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
position:fixed;
top:0px;
left:0px;
z-index:5;
float:left;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
display:none;
opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
position:fixed;
top:0px;
left:0px;
z-index:1;
float:left;
width:100%;
height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
display:block!important;
opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
position:absolute;
top:-4px;
right:-4px;
color:#00A6B6;
border-radius:2px;
background:#fff;
padding:4px;
}
Bootstrap jquery modal
En este artículo vamos a explicar como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> deberemos añadir los estilos de Bootstrap.
<link href="bootstrap.css" rel="stylesheet">
La ventana ya presenta una visualización bastante buena pero podemos cambiarla editando la hoja de estilos.
En nuestro <body> necesitaremos crear un link que abrirá la ventana:
<a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Abrir ventana modal</a>
Ahora tendremos justo debajo el código que representa la ventana en display:none.
<div id="example" class="modal hide fade in" style="display: none;"> <div class="modal-header"> <a data-dismiss="modal" class="close">×</a> <h3>Cabecera de la ventana</h3> </div> <div class="modal-body"> <h4>Texto de la ventana</h4> <p>Mas texto en la ventana.</p> </div> <div class="modal-footer"> <a href="index.html" class="btn btn-success">Guardar</a> <a href="#" data-dismiss="modal" class="btn">Cerrar</a> </div> </div>
Y finalmente solo faltará incluir los scripts antes de la etiqueta de cierre </body>:
<script src="jquery.js"></script> <script src="bootstrap-modal.js"></script>
0 comentarios: