Recientemente, pasé de crear aplicaciones fullstack Ruby a trabajar con Javascript. Como ya sabrá, Javascript permite a los usuarios o clientes interactuar con una página web y renderizar dinámicamente contenido nuevo en el DOM en función de la interactividad del usuario. En comparación con la codificación en Ruby on Rails (en la que cada rerender requiere una actualización de página completa), la capacidad de rerender varios elementos de página basados en las interacciones del usuario con Javascript trajo mis habilidades de desarrollo de 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 mensajes 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 de 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 repasemos los diversos tipos de cuadros de mensajes que puede encontrar.

Alertas

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

Popup

Un popup es una pegajosa (creo que ‘pega’ a la página, no pegajosas como caramelos) cuadro de mensaje que aparece en el navegador que no requieren de una interacción inmediata o atención. Si un usuario quiere que desaparezcan, tendrá que 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.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. El usuario puede interactuar con la notificación de gruñido, tal vez para descartar el cuadro de mensaje temprano, o para hacer clic en un botón dentro de la notificación, o puede optar por ignorarlo y desaparecerá después de que expire el temporizador. Al igual que una ventana emergente, la notificación growl permite que el cliente continúe interactuando con el resto de la página. Un ejemplo de esto es un correo electrónico o una notificación en redes sociales.

Lightbox/Teatro

Una caja de luz o un teatro es un cuadro de mensaje que normalmente se amplía el contenido que ya estaba disponible en el navegador de un usuario a centrarse 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 emplea una caja de luz o teatro con múltiples piezas de contenido, se considera «bloqueado» cuando un usuario puede navegar a través del contenido asociado dentro de la caja de luz en sí, en lugar de regresar a la página original y luego hacer clic en la siguiente imagen de la serie para agrandarla.

Ventana emergente/tarjeta de presentación

Uno de los más pequeños cuadros de mensaje, una ventana emergente o una tarjeta de presentación sólo aparece en la pantalla cuando un usuario pasa el ratón por encima de un área seleccionada. Estos cuadros de mensajes pueden contener instrucciones o explicaciones con respecto al botón o contenedor sobre el que el usuario está pasando el cursor; también pueden contener una vista previa de la información disponible si el usuario hace clic en un enlace.

Modal/Cuadro de Diálogo

por último, un modal o el cuadro de diálogo es un cuadro de mensaje que permite una mayor interactividad de la página sin tener que navegar fuera de la actual contenido en el navegador. Una caja modal no está bloqueada a la pantalla (p. ej., el cliente puede alejarse de él sin una interacción requerida), aunque normalmente es el enfoque del usuario (basado en el estilo de la caja). En la mayoría de los casos, si un usuario desea descartar el modal, simplemente puede cerrar la caja 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.

la Implementación de un Modal

con el fin De crear e implementar un referente en su página, hay tres pasos que tienes que completar para la funcionalidad:

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

HTML

Para el modal más simple, 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.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

En el ejemplo anterior, usted puede ver que tenemos un botón que aparecerá dentro de nuestro HTML, así como un modal, con tres clases CSS: modalmodal-btn y close-btn. Cada uno de ellos se incluirá en el CSS a continuación. El primer div es el contenedor padre 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 la etiqueta span y el texto dentro de una etiqueta p.

Como un paso a un lado, también puede implementar encabezados y pies de página en su modal simplemente creando más divs dentro de las clases HTML y CSS adicionales para fines de estilo. Por ejemplo:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

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

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

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

La clase .modal 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 podamos alternarla en nuestro Javascript cuando un usuario haga clic en el botón.

Para el cuadro de diálogo real, también tenemos estilos separados en .modal-content: colocándolo contra el estilo de fondo, un color de fondo para el cuadro de diálogo en sí, relleno, y en este ejemplo se incluye animación para que el modal caiga 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 cursor sobre el botón cerrar, el color cambiará. Para mayor claridad, el usuario puede hacer clic fuera del modal para cerrar el cuadro de diálogo de la misma manera que hacer clic en el botón cerrar. Crearemos un receptor de eventos para ambas opciones en nuestro Javascript.

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

Javascript

Por último, necesitamos escribir algo de 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 = "block"
}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 asignados a las variables de: modal-btn, el modal sí, y el close-btn. Luego, hemos creado escuchas de eventos para eventos onclick. Cuando un usuario hace clic en modal-btn, el estilo de visualización se establece en "block”, pero cuando hace clic en close-btn o en la ventana fuera del modal (representada en nuestro estilo como gris semiopaco), el estilo de visualización se establece a partir de entonces en "none". Esto oculta efectivamente el modal hasta que haga clic en modal-btn de nuevo.

en General, jugando con el DOM con Javascript ha sido muy divertido y gratificante como un principio codificador. Esperemos que el código anterior le ayude a implementar modales y cuadros de mensajes por su cuenta también. Con un poco de búsqueda rápida en Google, también puede encontrar más recursos para ajustar los modales y los cuadros de diálogo para sus casos de uso.

¡Buena suerte y feliz programación!