Crear una Ventana Emergente para una Web -

Crear una Ventana Emergente para una Web

Crear una Ventana Emergente para una Web. ¿Quieres darle a tu página web un aviso importante o un formulario de suscripción que no pase desapercibido? ¡La solución es una ventana modal!

En este tutorial, te proporcionamos un script completo y listo para usar que te permitirá implementar una ventana modal (o pop-up) en cualquier página web. Utilizando una combinación de HTML, CSS y JavaScript, este código es ligero, eficiente y no requiere bibliotecas externas como jQuery. Aprende a crear un cuadro de diálogo que se superpone al contenido principal de la página, ideal para notificaciones, formularios de suscripción o galerías de imágenes. A continuación, encontrarás el código fuente completo y una explicación paso a paso para su correcta integración.

El script consta de tres partes principales:

HTML: La estructura básica de la página, que incluye un botón para abrir la ventana modal y el contenido de la ventana en sí.
CSS: Los estilos para hacer que la ventana modal se vea bien y se posicione correctamente en la pantalla, oscureciendo el fondo para destacar el contenido.
JavaScript: La lógica para abrir y cerrar la ventana cuando el usuario hace clic en los botones.

1. HTML: La estructura

Copia este código y pégalo en un archivo llamado index.html. Aquí tenemos el botón que activa el modal y la estructura del modal con un botón para cerrarlo.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ventana Modal</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <h1>Mi Página Web</h1>
        <p>Haz clic en el botón para abrir la ventana modal.</p>
        <button id="abrirModalBtn">Abrir Ventana Modal</button>
    </header>

    <div id="miModal" class="modal">

        <div class="modal-contenido">
            <span class="cerrarBtn">×</span>
            <h2>¡Hola! Esto es una ventana modal.</h2>
            <p>Puedes usar esto para mostrar avisos importantes, formularios, o una imagen ampliada.</p>
            <p>El contenido principal de la página queda en segundo plano.</p>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

2. CSS: Los estilos

Crea un nuevo archivo llamado style.css y pega el siguiente código. Este CSS se encarga de que la ventana modal esté oculta por defecto y se muestre correctamente sobre el resto del contenido cuando se active.

CSS

<div class="code-block-container">
    <button class="copy-code-button">Copiar Código</button>
    <textarea class="code-textarea" readonly>
<h1>Hola, Mundo!</h1>
<p>Este es un ejemplo de texto copiable.</p>
<a href="#" onclick="alert('¡Clic en enlace funcional!')">Enlace Funcional</a>

3. JavaScript: La lógica

Crea un archivo llamado script.js y copia el siguiente código. Este script se encarga de buscar los elementos de HTML y de asignarles las acciones necesarias para mostrar y ocultar la ventana.

JavaScript

// Obtener los elementos del DOM
const modal = document.getElementById(‘miModal’);
const botonAbrir = document.getElementById(‘abrirModalBtn’);
const botonCerrar = document.getElementsByClassName(‘cerrarBtn’)[0];

// Cuando el usuario hace clic en el botón de «Abrir», muestra la ventana
botonAbrir.onclick = function() {
    modal.style.display = ‘block’;
};

// Cuando el usuario hace clic en la ‘x’, cierra la ventana
botonCerrar.onclick = function() {
    modal.style.display = ‘none’;
};

// Cuando el usuario hace clic fuera de la ventana, también la cierra
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = ‘none’;
    }
};

¿Cómo funciona?

Instala los tres archivo dentro de una misma carpeta.

El archivo index.html enlaza a los archivos style.css y script.js.
El CSS oculta la ventana modal por defecto (display: none;).
Cuando el usuario hace clic en el botón con id="abrirModalBtn", el JavaScript captura ese evento.
El script cambia la propiedad display del modal de none a block, lo que lo hace visible.
Cuando el usuario hace clic en la × (class="cerrarBtn") o en el área oscura fuera de la ventana, el JavaScript vuelve a cambiar el display del modal a none, ocultándolo.

Este script es un excelente punto de partida. Puedes modificar fácilmente el contenido dentro de la etiqueta <div class="modal-contenido"> para mostrar lo que necesites, ya sea un formulario, un mensaje o una imagen.

Código completo para incrustar directamente en una pagina existente

Aquí tienes un ejemplo de un código completo en HTML para incrustar una ventana modal directamente en una página web existente. Este código incluye el HTML, el CSS y el JavaScript necesarios, todo en un solo archivo, lo que facilita su integración.

Puedes copiar este código y pegarlo en cualquier parte del <body> de tu página.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página con Modal</title>
    
    <style>
        /* Estilos generales (opcional) */
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
        }

        /* Estilos de la ventana modal */
        .modal {
            display: none; /* Oculta la ventana por defecto */
            position: fixed; /* Posiciona la ventana sobre todo lo demás */
            z-index: 1000; /* Asegura que esté por encima de otros elementos */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente */
            padding-top: 60px;
        }

        /* Contenido de la ventana modal */
        .modal-contenido {
            background-color: #fff;
            margin: 5% auto; /* Centrado en la pantalla */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 600px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            position: relative;
        }

        /* Botón de cerrar */
        .cerrarBtn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .cerrarBtn:hover,
        .cerrarBtn:focus {
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body>

    <h3>Ejemplo de ventana emergente</h3>
    <p>Este es el contenido principal de tu página web. La ventana modal aparecerá sobre este contenido cuando se active.</p>

    <button id="abrirModalBtn">Abrir Ventana Modal</button>

    <div id="miModal" class="modal">
        <div class="modal-contenido">
            <span class="cerrarBtn">×</span>
            <h2>¡Hola desde el Modal!</h2>
            <p>Este es el contenido que quieres destacar. Aquí puedes poner un formulario, una imagen, o un aviso importante.</p>
            <p>Este código está completamente contenido en un solo bloque, ideal para incrustar.</p>
        </div>
    </div>

    <script>
        // Obtener los elementos del DOM
        const modal = document.getElementById('miModal');
        const botonAbrir = document.getElementById('abrirModalBtn');
        const botonCerrar = document.getElementsByClassName('cerrarBtn')[0];

        // Cuando el usuario hace clic en el botón de "Abrir", muestra la ventana
        botonAbrir.onclick = function() {
            modal.style.display = 'block';
        };

        // Cuando el usuario hace clic en la 'x', cierra la ventana
        botonCerrar.onclick = function() {
            modal.style.display = 'none';
        };

        // Cuando el usuario hace clic fuera de la ventana, también la cierra
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        };
    </script>

</body>
</html>

¿Cómo funciona?

<style>: Enlaza los estilos CSS directamente en la sección <head> de la página. Esto es útil para proyectos pequeños o para incrustar rápidamente sin crear archivos externos.
<div id="miModal">: La estructura de la ventana modal se coloca en el <body>, lista para ser mostrada u ocultada.
<script>: El código JavaScript se encuentra al final del <body>, lo que asegura que el script se ejecute después de que los elementos HTML hayan sido cargados.

Simplemente copia y pega este código en tu archivo HTML. Puedes modificar el contenido dentro de <div class="modal-contenido"> para adaptarlo a tus necesidades.

Instrucciones de personalización del script Crear una Ventana Emergente para una Web.

Aquí tienes unas instrucciones detalladas para personalizar el script de la ventana modal que te proporcioné. Podrás cambiar el contenido, los colores, el tamaño y el comportamiento para adaptarlo a las necesidades de tu sitio web.

1. Personalizar el Contenido (HTML)

Puedes cambiar completamente el contenido que se muestra dentro de la ventana modal. Abre tu archivo HTML y busca el siguiente bloque:

HTML

<div class="modal-contenido">
    <span class="cerrarBtn">&times;</span>
    <h2>¡Hola desde el Modal!</h2>
    <p>Este es el contenido que quieres destacar. Aquí puedes poner un formulario, una imagen, o un aviso importante.</p>
    <p>Este código está completamente contenido en un solo bloque, ideal para incrustar.</p>
</div>

Qué puedes cambiar:

Título (<h2>): Reemplaza ¡Hola desde el Modal! por un título relevante para tu mensaje, como «¡Bienvenido!», «Suscríbete a nuestro boletín» o «Aviso Importante».
Texto (<p>): Modifica los párrafos para que contengan la información que deseas comunicar.
Formularios: Inserta un formulario completo para captar datos.

Por ejemplo:

HTML

<form action="/enviar_formulario" method="post"> <label for="email">Email:</label><br> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Suscribirme"> </form>

Imágenes: Agrega una imagen para promocionar un producto o mostrar una vista ampliada:HTML<img src="URL_DE_TU_IMAGEN.jpg" alt="Descripción de la imagen" style="max-width: 100%; height: auto;">

2. Personalizar los Estilos (CSS)

El bloque <style> es donde puedes modificar la apariencia de la ventana modal.

Para cambiar los colores:

Fondo de la ventana: En la clase .modal, cambia el valor de background-color.

CSS

.modal { /* Fondo semi-transparente de la pantalla */ background-color: rgba(0,0,0,0.7); /* Más oscuro */ }

Fondo del contenido: En la clase .modal-contenido, cambia el background-color.

CSS

.modal-contenido { /* Fondo del cuadro de diálogo */ background-color: #f0f8ff; /* Un color más claro */ }

Color del botón «Cerrar» (×): En la clase .cerrarBtn, cambia el color.

CSS

.cerrarBtn { color: #ff0000; /* Color rojo */ }

Para cambiar el tamaño y la posición:

Ancho de la ventana: En la clase .modal-contenido, ajusta width y max-width.

CSS

.modal-contenido { width: 60%; /* Hace el modal más estrecho */ max-width: 400px; /* Ancho máximo en pantallas grandes */ }

Posición vertical: En la clase .modal-contenido, modifica margin-top.

CSS

.modal-contenido { margin: 10% auto; /* Lo mueve más arriba en la pantalla */ }

3. Personalizar el Comportamiento (JavaScript)

El bloque <script> al final del <body> controla cuándo se abre y se cierra la ventana.

Para cambiar la forma de abrir la ventana:

Actualmente, la ventana se abre con un clic en el botón. Si quieres que la ventana se abra automáticamente al cargar la página, puedes modificar el JavaScript.

Para que se abra al cargar la página: Elimina la línea botonAbrir.onclick = ... y añade este código después de definir la variable modal.

.JavaScript

// Hacer que la ventana modal se abra automáticamente window.onload = function() { modal.style.display = 'block'; };

Para controlar la persistencia del modal:

Puedes evitar que la ventana se cierre al hacer clic fuera de ella. Esto es útil para formularios obligatorios o avisos importantes que requieren una acción del usuario.

Para evitar que se cierre al hacer clic fuera: Simplemente elimina o comenta el siguiente bloque de código

.JavaScript

// Cuando el usuario hace clic fuera de la ventana, también la cierra /* window.onclick = function(event) { if (event.target == modal) { modal.style.display = 'none'; } }; */

Con estas instrucciones, puedes adaptar fácilmente la ventana modal a cualquier diseño o funcionalidad que necesites.

Mi Página con Modal

Ejemplo de ventana emergente

Este es el contenido principal de tu página web. La ventana modal aparecerá sobre este contenido cuando se active.

👉 Más Utilidades web

Comparte esta información:

WhatsApp X (Twitter) Facebook Email Telegram