Las cajas o ventanas modales resultan muy útiles a la hora de captar la atención del usuario, ya que le impiden interactuar con el resto de elementos de la página mientras no la cierre.
Un excelente plugin de JQuery que podemos utilizar para crearlas es Boxer, el cual puedes descargar desde su respositorio oficial haciendo clic aquí.
Una vez hayas bajado y descomprimido el archivo copia en una carpeta de tu proyecto los archivos jquery.fs.boxer.min y jquery.fs.boxer junto con las imágenes fs-boxer-icons.png y fs-boxer-loading.gif que encontrarás.
Algunas de sus propiedades más importantes son:
- customClass: permite definir una clase CSS.
- fixed: muestra la caja en una posición fija (permanecerá visible aunque sea haga scroll).
- height: altura inicial.
- margin: margen de la caja.
- minHeight: altura mínima de la caja.
- minWidth: ancho mínimo.
- top: distancia con respecto a la parte superior.
- width: ancho de la caja.
Con el siguiente ejemplo podrás comprobar lo fácil que te resultará integrarlo en tu página web:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InformaticaPC | ventana modal con Boxer</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* Configurando los DIV con el contenido oculto */
#oculto { display:none; }
.contenido_oculto { width: 300px; overflow: hidden; }
.contenido_oculto a { margin:10px; }
/* Estilos para los botones */
.button {
background:#254960;
border:0;
border-radius:3px;
color:#fff;
display:block;
float:left;
font-size:13px;
line-height:13px;
letter-spacing:.08em;
text-align:center;
text-transform:uppercase;
padding:17px 10px;
}
.button.small {
font-size:12px;
line-height:14px;
vertical-align:middle;
margin:0 10px 0 0;
padding:11px 15px 10px;
}
</style>
<!-- Agregamos la librería JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos la librería Boxer y su hoja de estilos -->
<script type="text/javascript" src="./boxer/jquery.fs.boxer.min.js"></script>
<link type="text/css" rel="styleSheet" href="./boxer/jquery.fs.boxer.css" media="all" />
<script type="text/javascript">
$(document).ready(function()
{
$(".boxer").boxer( {fixed:true} );
});
</script>
</head>
<body>
<a id="hc1" href="#oculto" class="boxer">Mostrar la ventana</a>
<p>Haz clic en la siguiente imagen:</p>
<a href="08.jpg" class="boxer" title="Fotografía"><img src="08-mini.jpg" alt="Miniatura" /></a>
<div id="oculto">
<div class="contenido_oculto">
<h2>Ventana Modal con JQuery</h2>
<p>Ejemplo de ventana modal creada con el plugin Boxer</p>
<a href="#" class="button small">Resize</a>
<a href="#" class="button small close_modal no-pronto">Close</a>
</div>
</div>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
<p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p>
</body>
</html>
EXPLICACIÓN: básicamente se trata de crear un 'div' con un contenido que al cargarse la página permanecerá oculto, encargándose el método boxer() de configurar los elementos HTML que contengan la clase 'boxer' para que sea mostrado tras hacer clic en ellos.
Te recomendamos que consultes el enlace a la documentación para que veas otras interesantes posibilidades que ofrece este plugin de JQuery.
También puedes crear ventanas modales utilizando el componente Dialog de JQuery UI, que explicamos un poco más adelante.
Vea también: [ Documentación ] - [ Tutorial CSS ]
