Vanilla JS + CSS - Tutorial emergente modal (diálogo) con ejemplo
Ejemplo construido con Vanilla JS y CSS
Otras versiones disponibles:
Esta es una publicación rápida para mostrar lo fácil que es implementar ventanas emergentes modales en HTML puro, CSS y JavaScript.
Aplicación de ejemplo JS + CSS
La aplicación de ejemplo contiene una sola página con algo de texto y un par de botones para abrir dos ventanas emergentes modales:
- Modal #1 - una ventana emergente modal personalizada simple.
- Modal #2 - una ventana emergente alta para demostrar que el modal se puede desplazar mientras se mantiene la página de abajo bloqueada en su posición.
Aquí está en acción: (Ver en StackBlitz en https://stackblitz.com/edit/vanilla-js-css-modal-popup-example)
El código HTML, CSS y JavaScript
La aplicación de ejemplo consta de solo tres archivos para el código HTML, Vanilla JS y CSS:
HTML Modal
El archivo index.html contiene tres elementos principales div, uno para el encabezado de la página y botones para abrir los modales (modal-1 y modal-2), y dos divs para los propios modales.
Incluye styles.css y script.js en el encabezado para manejar el estilo y el comportamiento modal.
Identificación única requerida
Cada modal debe tener un atributo id único (por ejemplo, <div id="modal-1">), se usa para identificar qué modal desea abrir al llamar a la función modal abierta (por ejemplo, openModal('modal-1')).
<!DOCTYPE html>
<html>
<head>
<title>Vanilla JS + CSS - Modal Popup Example</title>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<script src="script.js"></script>
</head>
<body>
<!-- main app container -->
<div>
<div>
<h1>Vanilla JS + CSS - Modal Popup Example</h1>
<p>Click the buttons below to open the example modals</p>
<button onclick="openModal('modal-1')">Open Modal 1</button>
<button onclick="openModal('modal-2')">Open Modal 2</button>
</div>
<div id="modal-1" class="jw-modal">
<div class="jw-modal-body">
<h1>A custom modal popup</h1>
<button onclick="closeModal()">Close</button>
</div>
</div>
<div id="modal-2" class="jw-modal">
<div class="jw-modal-body">
<h1>A tall modal popup</h1>
<p style="padding-bottom: 1500px;">Close with the button below or by clicking the background.</p>
<button onclick="closeModal()">Close</button>
</div>
</div>
</div>
</body>
</html>JavaScript Modal
JavaScript se utiliza para implementar el comportamiento modal, es decir, abrir y cerrar ventanas emergentes modales.
Funciones modales
openModal() -hace que aparezca el modal agregando la clase CSS open al elemento modal. Agrega la clase CSS jw-modal-open a la etiqueta <body> para bloquear el desplazamiento en el cuerpo subyacente.
closeModal() - hace que el modal desaparezca eliminando la clase open del elemento modal. Elimina la clase CSS jw-modal-open de la etiqueta <body> para desbloquear el desplazamiento en el cuerpo.
Cerrar al hacer clic en segundo plano
En la carga de la ventana, se agrega un detector de eventos 'click' al documento para cerrar cualquier modal al hacer clic en segundo plano.
// open modal by id
function openModal(id) {
document.getElementById(id).classList.add('open');
document.body.classList.add('jw-modal-open');
}
// close currently open modal
function closeModal() {
document.querySelector('.jw-modal.open').classList.remove('open');
document.body.classList.remove('jw-modal-open');
}
window.addEventListener('load', function() {
// close modals on background click
document.addEventListener('click', event => {
if (event.target.classList.contains('jw-modal')) {
closeModal();
}
});
});Estilos CSS Modales
Esta hoja de estilo es el archivo principal en el tutorial modal, los siguientes estilos CSS son los que convierten un par de divisiones en el HTML en ventanas emergentes modales en su navegador. El código javascript solo controla la apertura y el cierre.
Estilos generales
La parte superior del archivo contiene algunos estilos para embellecer un poco el ejemplo, ya que no usa Bootstrap ni ningún otro CSS.
Estilos modales
.jw-modal - el elemento raíz de cada modal está oculto (cerrado) de forma predeterminada. El div del contenedor externo se fija en toda la pantalla por encima de todos los demás elementos con un fondo negro semitransparente y el desplazamiento habilitado en caso de que el contenido sea más largo que la pantalla.
.jw-modal.open - el elemento modal raíz es visible cuando incluye la clase open.
.jw-modal-body - el div del contenedor interno solo tiene un fondo blanco y algo de relleno.
body.jw-modal-open - esta clase se agrega a la etiqueta HTML <body> cuando se abre un modal. El desplazamiento está deshabilitado en el contenido del cuerpo subyacente cuando un modal está abierto arriba.
El prefijo jw-
Agregué a las clases modales el prefijo jw- para evitar conflictos de nombres con cualquier biblioteca CSS de terceros que pueda estar usando (por ejemplo, Bootstrap).
/* GENERAL STYLES
-------------------------------*/
body {
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}
h1 {
font-weight: normal;
margin-top: 0;
}
button {
padding: 7px 10px;
margin-right: 5px;
}
/* MODAL STYLES
-------------------------------*/
.jw-modal {
/* modals are hidden by default */
display: none;
/* modal container fixed across whole screen */
position: fixed;
inset: 0;
/* z-index must be higher than everything else on the page */
z-index: 10000;
/* semi-transparent black background exposed by padding */
background-color: rgba(0, 0, 0, .75);
padding: 40px;
/* enables scrolling for tall modals */
overflow: auto;
}
.jw-modal.open {
display: block;
}
.jw-modal-body {
padding: 20px;
background: #fff;
}
body.jw-modal-open {
/* body overflow is hidden to hide main scrollbar when modal window is open */
overflow: hidden;
}
Suscríbete o Sígueme para actualizaciones
Suscríbete a mi canal de YouTube o sígueme en Twitter, Facebook o GitHub para recibir notificaciones cuando publique contenido nuevo.
- Suscríbete en YouTube en https://www.youtube.com/JasonWatmore
- Sígueme en Twitter en https://twitter.com/jason_watmore
- Sígueme en Facebook en https://www.facebook.com/JasonWatmoreBlog
- Sígueme en GitHub en https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Aparte de la codificación...
Actualmente estoy intentando viajar por Australia en motocicleta con mi esposa Tina en un par de Royal Enfield Himalayan. Puedes seguir nuestras aventuras en YouTube, Instagram y Facebook.
- Suscríbete en YouTube en https://www.youtube.com/TinaAndJason
- Síguenos en Instagram en https://www.instagram.com/tinaandjason
- Síguenos en Facebook en https://www.facebook.com/TinaAndJasonVlog
¿Necesita Ayuda Vanilla JS?
Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Vanilla JS experimentados.
Sube de nivel tus habilidades
Apoya mi trabajo
