in , ,

Crear una ventana modal con HTML, CSS y Javascript

Vista previa:

¿Que es un Modal?

Una ventana modal es una ventana que se abre en la página web por encima del contenido activo y que luego podemos cerrar haciendo clic con el ratón.

Aplicamos HTML:

Agregamos un botón, y los contenedores que tendrán dentro el contenido y el icono para cerrar

<button id="abrir_caja">Abrir Modal</button>

<div id="caja" class="ventana_emergente_fondo">
    <div class="ventana_emergente">
        <a id="cerrar_caja">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
                <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
            </svg>
        </a>
        <h3 class="titulo_ventana_emergente ">¿Que es un Modal?</h3>
        <p>Una ventana modal es una ventana que se abre en la página web por encima del contenido activo y que luego podemos cerrar haciendo clic con el ratón.</p>
    </div>
</div>

Aplicamos CSS:

Agregamos colores para el botón, el contenedor y el fondo del contenedor. Además de la posición y animación y ancho del modal, etc.

#abrir_caja {
    background: #26aef2;
    padding: 10px 25px;
    color: #ffffff;
    border-radius: 50px;
}
#cerrar_caja {
  	float: right;
}
#abrir_caja , #cerrar_caja {
	cursor: pointer;
}
.activo {
    opacity:1 !important;
    pointer-events:auto !important;
}
.ventana_emergente_fondo {
    display: flex;
    background-color: rgba(0,0,0,.8);
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity:0;
    pointer-events:none;
    transition: all 0.5s;
    z-index: 100;
}
.ventana_emergente {
    background-color:#fff;
    max-width:500px;
    padding: 15px 20px;
    margin: auto;
    border-radius: 10px;
}
@media (max-width: 768px) {
    .ventana_emergente {
		max-width: 300px;
        margin: 20% auto;
    }
}
.titulo_ventana_emergente {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 600;
}

Aplicamos JAVASCRIPT:

El código JS obtendrá los ID (abrir_caja, cerrar_caja y caja) para en cuanto se ejecute agregue o elimine la clase “activo”

const abrir_caja = document.getElementById('abrir_caja');
const cerrar_caja = document.getElementById('cerrar_caja');
const caja = document.getElementById('caja');

abrir_caja.addEventListener('click', function () {
  caja.classList.add('activo');
});

cerrar_caja.addEventListener('click', function () {
  caja.classList.remove('activo');
});

Crear botón con Espera de X segundos JavaScript

Crear botón con enlace aleatorio con JavaScript