Crear una ventana modal con HTML, CSS y Javascript

<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>

#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;
}

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