Como dice el título, he creado este modal emergente retrasado en mi página y todo está bien, el único problema es que mi botón de cerrar no funciona, al pasar el mouse sobre él se activará el css, pero al hacer clic en él no lo hará cerca. Supongo que mi javascript tiene algo que ver con el error, pero no pude encontrar la solución para solucionarlo.

HTML:

 <div id="delayedpopupmodal"> <button id="close">&times;</button> <h2>Want to enquire us further?</h2> <h4> Contact Us: <a href="mailto:randommail@email.com"> Email Us!</a></h4> </div> </div> </div>

CSS:

 .delayedpopupmodal{ background-color: black; color:white; width: 450px; padding: 30px 40px; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; border-radius: 10px; display: none; } .delayedpopupmodal button{ display: block; margin: 0 0 20px auto; background-color: transparent; font-size: 40px; color: white; border: none; outline: none; } .delayedpopupmodal button:hover { display: block; margin: 0 0 20px auto; background-color: transparent; font-size: 40px; color: red; border: 5px; outline-color: red; } h4{ color:white; text-align: center; }

JS:

 window.addEventListener("load", function(){ setTimeout( function open(event){ document.querySelector(".delayedpopupmodal").style.display = "block"; }, 1000 ) }); document.querySelector("#close").addEventListener("click",function(){ document.querySelector(".delayedpopupmodal").style.display = "none"; })