Una guía práctica para cuadros modales con Javascript, HTML y CSS

Recientemente, hice el salto de crear aplicaciones Ruby fullstack para trabajar con Javascript. Como ya sabrás, Javascript permite a los usuarios o clientes interactuar con una página web y generar dinámicamente contenido nuevo al DOM en función de la interactividad del usuario. En comparación con la codificación en Ruby on Rails (en el que cada reproducción requiere una actualización de página completa), la capacidad de reproducir varios elementos de la página en función de las interacciones del usuario con Javascript trajo mis habilidades de desarrollo frontend desde 1994 hasta el presente. Con mi comprensión rudimentaria de Javascript, ahora puedo crear un elemento web interactivo que he estado esperando implementar en mis proyectos: cuadros de mensaje o ventanas emergentes.

Un modal, o cuadro de diálogo, es un cuadro de mensaje que aparece en el navegador después de cierta interactividad del usuario especificada. Antes de profundizar en los detalles de la creación de un cuadro modal para su sitio con HTML, CSS y Javascript, primero revisemos los diversos tipos de cuadros de mensaje que puede encontrar.

Tipos de cuadros de mensaje

Alertas

Una alerta es un cuadro de mensaje, generalmente bloqueado dentro del navegador, que requiere una respuesta o interacción del usuario antes de que se pueda cerrar y desaparecer de la página. Quizás desee que el cliente reconozca la información (Términos de uso) o que la página misma confirme la finalización de un formulario. Sin embargo, hasta que se descarte la alerta, el cliente no puede interactuar con el resto de la página.

Cuadro de mensaje de alerta

Surgir

Una ventana emergente es un cuadro de mensaje que aparece en el navegador y que no requiere interacción o atención inmediata. Si un usuario desea que desaparezcan, deberá cerrar o interactuar con la ventana emergente en ese momento, pero la interactividad del resto de la página sigue siendo funcional. Las notificaciones son un ejemplo de una ventana emergente.

Cuadro de mensaje emergente

Notificación de gruñido / aviso flash

Una notificación de gruñido es una ventana emergente que se descarta después de un período de tiempo asociado. A veces, estos también se conocen como avisos flash. El usuario puede interactuar con la notificación de gruñido, tal vez para cerrar el cuadro de mensaje antes de tiempo, o hacer clic en un botón dentro de la notificación, o puede elegir ignorarlo y desaparecerá una vez que expire el temporizador. Al igual que una ventana emergente, la notificación de gruñido permite que el cliente continúe interactuando con el resto de la página. Un ejemplo de esto es una notificación por correo electrónico o redes sociales.

Notificación de gruñido

Caja de luz / teatro

Una caja de luz o una sala de cine es un cuadro de mensaje que generalmente amplía el contenido que ya estaba disponible en el navegador para que un usuario se concentrara en él. Un caso de uso común es una imagen o una serie de imágenes que se muestran en una galería. Cuando se utiliza una caja de luz o una sala de cine con varias piezas de contenido, se considera 'bloqueada' cuando un usuario puede navegar a través del contenido asociado dentro de la caja de luz, en lugar de regresar a la página original y luego hacer clic en la siguiente imagen de la serie alargar.

Caja de luz / teatro

Popover / Hovercard

Uno de los cuadros de mensaje más pequeños, un popover o una tarjeta flotante solo aparece en la pantalla cuando un usuario pasa el mouse sobre un área seleccionada. Estos cuadros de mensaje pueden contener instrucciones o explicaciones sobre el botón o contenedor sobre el que el usuario se encuentra actualmente; también pueden contener una vista previa de la información disponible si el usuario hace clic en un enlace.

Popover / Hovercard

Modal / Cuadro de diálogo

Finalmente, un cuadro de diálogo o modal es un cuadro de mensaje que permite una mayor interactividad de la página sin tener que alejarse del contenido actual en el navegador. Un cuadro modal no está bloqueado en la pantalla (es decir, el cliente puede navegar fuera de él sin una interacción requerida), aunque normalmente es el foco del usuario (según el estilo del cuadro). En la mayoría de los casos, si un usuario desea descartar el modal, simplemente puede cerrar el cuadro con un botón proporcionado o hacer clic fuera del modal. Un ejemplo de modal es cuando un usuario necesita completar un formulario o proporcionar información específica para una consulta de búsqueda, pero no desea que navegue a otra página.

Modal / Cuadro de diálogo

Implementación de un modal

Para crear e implementar un modal en su página, hay tres pasos que debe completar para la funcionalidad:

  1. HTML: marcado para crear el elemento modal
  2. CSS: estilo para determinar cómo se ve y aparece su modal en la página
  3. Javascript: colocando oyentes de eventos para que el modal aparezca / desaparezca dependiendo de la interactividad de su usuario

HTML

Para los modales más simples, necesitamos un botón (o cualquier elemento de página que prefiera) en el que un usuario pueda hacer clic para activar el modal, el modal real, y es probable que desee implementar un botón de cierre dentro del modal.

En lo anterior, puede ver que tenemos un botón que aparecerá dentro de nuestro HTML, así como un modal, con tres clases CSS: modal, modal-btn y close-btn. Cada uno de estos se incluirá en el CSS a continuación. El primer div es el contenedor principal que contiene el modal completo con una clase de modal. Internamente, tenemos un div que contiene el contenido del modal en sí: el botón para cerrar el modal en el lapso y el texto dentro de una etiqueta.

Como comentario rápido, también puede implementar encabezados y pies de página en su modal simplemente creando más divs dentro del HTML y más clases de CSS para fines de diseño. Por ejemplo:

CSS

Para diseñar cada uno de los elementos en nuestro HTML modal simple, necesitamos crear las clases CSS asociadas: .modal, .modal-content y .close-btn. Además, puede ver a continuación que también se incluye CSS para crear animación para el modal.

.modal {
  pantalla: ninguno;
  posición: fija;
  acolchado: 50px;
  izquierda: 0;
  arriba: 0;
  ancho: 100%;
  altura: 100%;
  color de fondo: rgb (0, 0, 0);
  color de fondo: rgba (0, 0, 0, 0.5);
}
.modal-content {
  posición: relativa;
  color de fondo: blanco;
  acolchado: 20px;
  margen: auto;
  ancho: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duración: 0.4s;
  nombre-animación: animatetop;
  duración de la animación: 0.4s
}
.close-btn {
  flotar derecho;
  color: gris claro;
  tamaño de fuente: 24px;
  peso de fuente: negrita;
}
.close-btn: hover {
  color: gris oscuro;
}
@ -webkit-keyframes animatetop {
  desde {arriba: -300px; opacidad: 0}
  hasta {top: 0; opacidad: 1}
}
@keyframes animatetop {
  desde {arriba: -300px; opacidad: 0}
  hasta {top: 0; opacidad: 1}
}

En las clases anteriores, tenemos estilos para cada uno de los elementos que creamos en nuestro HTML.

La clase .modal en sí tiene atributos que determinan cómo trata la página detrás del modal en sí: un ancho y alto en comparación con la página detrás del cuadro de diálogo, un color (este ejemplo usa un gris semiopaco) y una configuración de visibilidad para que podemos alternarlo en nuestro Javascript cuando un usuario hace clic en el botón.

Para el cuadro de diálogo real, también tenemos un estilo separado en .modal-content: posicionándolo contra el estilo de fondo, un color de fondo para el cuadro de diálogo en sí, relleno, y en este ejemplo hay animación incluida para que el modal se despliegue desde la parte superior de la página.

Además, diseñamos una clase .close-btn que flota una "x" a la derecha, y con .close-btn: hover, cuando el usuario pasa el mouse sobre el botón de cerrar, el color cambiará. Para mayor claridad, el usuario puede hacer clic fuera del modal para cerrar el cuadro de diálogo al igual que hacer clic en el botón Cerrar. Crearemos un detector de eventos para ambas opciones en nuestro Javascript.

Esto apenas rasca la superficie de CSS que podrías implementar por tu cuenta. Siéntase libre de ajustar el código anterior para que se adapte mejor a sus propias necesidades.

Javascript

Por último, necesitamos escribir algunos Javascript para crear la funcionalidad del modal.

let modalBtn = document.getElementById ("modal-btn")
let modal = document.querySelector (". modal")
let closeBtn = document.querySelector (". close-btn")
modalBtn.onclick = function () {
  modal.style.display = "bloque"
}
closeBtn.onclick = function () {
  modal.style.display = "none"
}
window.onclick = function (e) {
  if (e.target == modal) {
    modal.style.display = "none"
  }
}

Hemos seleccionado varios objetos de nuestro HTML y los hemos asignado a variables: un modal-btn, el modal en sí mismo y el close-btn. Luego, creamos oyentes de eventos para eventos onclick. Cuando un usuario hace clic en modal-btn, el estilo de visualización se establece en "bloque", pero cuando hace clic en close-btn o en la ventana fuera del modal (representado en nuestro estilo como el gris semiopaco), el el estilo de visualización se establece a partir de entonces en "ninguno". Esto efectivamente oculta el modal hasta que vuelven a hacer clic en el modal-btn.

Modal impreso en la pantalla

En general, jugar con DOM con Javascript ha sido increíblemente divertido y gratificante como programador principiante. Esperemos que el código anterior también lo ayude a implementar modales y cuadros de mensaje. Con algunas búsquedas rápidas en Google, también puede encontrar más recursos para ajustar modales y cuadros de diálogo para sus casos de uso.

¡Buena suerte y feliz codificación!

Recursos

Intercambio de pila: modos, ventanas emergentes, popovers y lightboxes

w3schools: Cómo hacerlo - CSS / JS Modal

Sabe: Cómo crear un cuadro emergente modal con CSS y JavaScript