Crear una ventana modal con HTML, CSS y Javascript

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');
});

See the Pen Crear una ventana modal con HTML, CSS y Javascript by Gustavo (@gusta1996) on CodePen.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock
close