Soy un principiante e intenté codificar en un video tutorial de Javascript (Proyectos para principiantes). El problema es que mi modal no apareció una vez que hice clic en el botón. La nueva clase que he creado (.open-modal) en javascript vainilla apareció en los elementos de la herramienta de desarrollo al igual que el botón de cerrar una vez que desmarqué el índice z: -10 y la visibilidad: oculta. También traté de hacer clic en el botón de cerrar, pero no pasa nada. ¡Gracias!
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>Solo tiene que escribir ".open-modal" después de ".modal-container" o usar "!important" al final de sus estilos ".open-modal" para que funcione bien
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>