I am a beginner and tried to code along in a Javascript tutorial video(Beginner Projects). The problem is my modal did not pop-up once I clicked the button. The new class i've created (.open-modal) in vanilla javascript appeared in the dev tool elements the same as the close button once I unchecked the z-index: -10 and visibility: hidden. I also tried to click the close button but nothing happens. Thanks!
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});.open-modal {
visibility: visible;
z-index: 100;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: -10;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>You just have to write ".open-modal" after ".modal-container" or use "!important" end of your ".open-modal" styles to work well
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: 0;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}
.open-modal {
visibility: visible;
z-index: 100;
}<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>