Cómo hacer una ventana modal

Escrito por vail joy | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer una ventana modal
Las ventanas modales actúan como un cuadro dinámico para tu contenido. (Stockbyte/Stockbyte/Getty Images)

Las ventanas modales son una forma nueva y discreta de mostrar contenido emergente en tus páginas web. Puedes crear ventanas modales para ofrecer formularios de registro, mostrar imágenes a tamaño completo, mensajes de confirmación o cualquier contenido que desees. Las ventanas modales sobresalen por su flexibilidad de diseño, y es posible cambiar el estilo del elemento dentro de la ventana modal de muchas formas. Existen varias secuencias de comandos y complementos prefabricados que pueden implementarse en tu HTML o sistema de gestión de contenido, pero tú puedes crear una ventana modal fácil y rápidamente usando solamente CSS3 y HTML5.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre un editor de texto o HTML y crea un nuevo documento en blanco. Introduce la etiqueta "doctype" de HTML5:

    <!DOCTYPE html>

    Añade las etiquetas básicas de la estructura del documento para crear una plantilla vacía:

    <head>

    </head> <body>

    </body> </html>

  2. 2

    Crea tu contenido de HTML. Para el propósito de este ejemplo puedes tener un contenedor simple con un poco de texto y algunas imágenes en miniatura para crear un mini álbum:

    <div id="container"> <header>Ejemplo de galería</header> <section id="gallery"> <article class="description"> Haz clic en cada miniatura para verla en versión ampliada. </article> <div id="gallery_thumbs"> <img src="images/thumb1.jpg" alt="1"/> <img src="images/thumb1.jpg" alt="2"/> <img src="images/thumb1.jpg" alt="3"/> </div> </section> </div>

  3. 3

    Crea tu ventana modal añadiendo otro DIV debajo de tu contenedor DIV. Dale un ID único que será usado para vincularlo a la ventana modal, y una clase que será usada para cambiar su estilo. Para este ejemplo deberás crear tres ventanas modales, una por cada imagen en tamaño completo. Inserta la imagen de tamaño completo en el DIV y vincula cada una asignando la URL al ancla "#close". Esto permitirá que el espectador simplemente haga clic en la imagen para cerrar la ventana modal:

    <div id="img1" class="modal"> <a href="#close"><img src="images/1.jpg" alt="1"/></a> </div> <div id="img2" class="modal"> <a href="#close"><img src="images/2.jpg" alt="2"/></a> </div> <div id="img3" class="modal"> <a href="#close"><img src="images/3.jpg" alt="3"/></a> </div>

  4. 4

    Crea vínculos de tus imágenes miniatura encapsulándolas en una etiqueta "a href". Para abrir la imagen a tamaño completo en tu ventana modal, debes configurar la URL de cada vínculo como el ancla o ID definido en la ventana modal DIV correspondiente:

    <div id="gallery_thumbs"> <a href="#img1"><img src="images/thumb1.jpg" alt="1"/></a> <a href="#img2"><img src="images/thumb1.jpg" alt="2"/></a> <a href="#img3"><img src="images/thumb1.jpg" alt="3"/></a> </div>

  5. 5

    Coloca tu cursor debajo de la etiqueta "<head>" e introduce la etiqueta "style":

    <style>

    </style>

    Los estilos CSS para tus elementos y contenedores modales serán colocados aquí. De forma opcional puedes colocarlos en un documento "style.css" separado y vincular la hoja de estilo a tu HTML. Para crear el efecto modal, tu clase modal debe tener al menos una posición "absolute," un elevado "z-index," y un atributo "display:none":

    .modal { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 999; background: rgba(0,0,0,0.5); -webkit-animation-duration: 1s; -webkit-animation-name: fade; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; }

    Para establecer el estilo del vínculo "close", agrega un estilo para tu etiqueta "a":

    .modal a { display: block; vertical-align: right; text-align: center;

    }

    Para crear un marco de estilo elegante o con un efecto "Polaroid", añade un estilo para la etiqueta "img":

    .modal img { padding: 5px 5px 45px 5px; background: #ffffff; -webkit-box-shadow: 0px 0px 15px #444; -moz-box-shadow: 0px 0px 15px #444; -webkit-animation-duration: 0.50s; -webkit-animation-name: grow; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; }

  6. 6

    Añade un estilo más para tu clase "modal" usando el pseudo selector ":target". Este selector te permite configurar la URL destino de un vínculo para mostrar el contenido de un elemento oculto, que en este caso es tu contenedor modal.

    .modal:target {

    display: table; height:100% }

    Continúa añadiendo estilos adicionales para tus imágenes miniatura o tu contenido según lo desees. Guarda los archivos y obtén una vista previa de los mismos en tu explorador para ver los resultados.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles