Estou tentando fazer um modal, o script ta adicionando a classe normalmente, mas não está removendo.
Código:
const abreItem1 = document.querySelector('.js-open-item-1');
const fechaItem1 = document.querySelector('.js-close-item-1');
const modalItem1 = document.getElementById('modal-item-1');
function ativaItem1() {
modalItem1.classList.add('item-1-ativo');
}
function desativaItem1() {
modalItem1.classList.remove('item-1-ativo');
}
abreItem1.addEventListener('click', ativaItem1);
fechaItem1.addEventListener('click', desativaItem1);
.modal-item-1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
}
.modal-item-1.item-1-ativo {
opacity: 1;
pointer-events: all;
}
.modal-item-1 .overlay-item-1 {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
}
.box-item-1 {
position: relative;
background-color: #000;
z-index: 2;
margin: 0 auto;
max-width: 700px;
padding: 20px 0 80px 0;
}
.js-close-item-1 {
width: 40px;
height: 40px;
margin: 0 40px 40px 20px;
z-index: 25;
cursor: pointer;
}
<div class="personagem-1 js-open-item-1">
<h2>We just don’t know what to expect</h2>
<p>Wanda</p>
<div class="modal-item-1" id="modal-item-1">
<div class="overlay-item-1"></div>
<div class="box-item-1">
<img src="img/close.svg" class="js-close-item-1">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus repudiandae ducimus illo reprehenderit aliquam maxime repellendus quam unde provident cupiditate accusamus odio, sunt suscipit impedit animi libero nobis. Earum, explicabo?</p>
</div>
</div>
<!--modal-item-1-->
</div>
