As the title stated, Ive created this delayed popup modal on my page and it is all fine, the only problem is that my close button isn't working, hovering over it will trigger the css, but clicking it won't cause it to close. I assume my javascript has something to do with the error, but I could not find the solution to fix it.

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