Menu
Hi! I am working on a project for my girlfriend’s birthday but I’m having trouble using the classList.remove in JavaScript so that upon button press it will remove a class that in CSS will display the display to none, therefore closing the popup. I’m a programming noob so please explain as if you’re speaking to a 5 year old! 😅
HTML:
“`
<div class=”modal” id=”modal-br”>
<div class=”modal-header”>
<div class=”modal-title”>Brazil</div>
<button data-close-button class=”close-btn”>×</button>
</div>
<div class=”modal-body”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, accusamus.
</div>
</div>
CSS:
“`
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: scale(0);
transition: 200ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 500px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%,-50%) scale(1);
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .modal-title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-btn {
cursor: pointer;
border: none;
background: none;
outline: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
JS:
“`
var modal = document.getElementById(‘modal-br’);
const path = document.getElementById(‘BR’);
const closeBtn = document.querySelectorAll(‘[data-close-button]’);
path.addEventListener(‘click’, openModal);
closeBtn.addEventListener(‘click’, function(){
modal.classList.remove(‘active’);
overlay.classList.remove(‘active’);
});
function openModal(){
modal.classList.add(‘active’)
overlay.classList.add(‘active’)
};