Publicada:

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

Ruta: /index.html

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

Ruta: /script.js

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

Ruta: /styles.css

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.

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.


¿Necesita Ayuda Vanilla JS?

Buscar fiverr para encontrar ayuda rápidamente de desarrolladores Vanilla JS experimentados.