I implemented a popup feature in my application:
<div id="modal"></div>
let modal = document.getElementById('modal')
modal.innerHTML = `
<button class="close-button" onclick="close_modal()">Close</button>
`
#modal{
width: 30em;
height: 24em;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
Upon clicking a specific button, a function is triggered that contains modal.classList.add('open-modal').
.open-modal{
visibility: visible !important;
}
The close_modal function looks like this:
function close_modal(){
modal.classList.add('close-modal')
}
Here's the CSS for handling modal closing:
.close-modal{
visibility: hidden !important;
}
Initially, the popup functionality works correctly as I can open and close it. However, on attempting to open it for the second time, the popup does not appear. What could be causing this issue and how can it be resolved?