modal.classList.remove('hidden') no funciona.
const modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const closeBtn = document.querySelector('.close'); const showBtns = document.querySelectorAll('.show-modal'); for (let i = 0; i < showBtns.length; i++) { showBtns[i].addEventListener('click', function () { console.log('Button Clicked'); modal.classList.remove('hidden'); console.log(modal.classList); }); } .hidden { display: none; } <input type="button" class="show-modal" value="Show"> <div class="modal hidden">This is .modal</div>Su secuencia de comandos funciona muy bien eliminando la clase hidden después del primer clic. Pero si desea volver a mostrar el elemento oculto después de un segundo clic, debe usar toggle en lugar de remove para restaurar la clase .hidden, ocultándola nuevamente.
Ver documentación
EDITAR: En mi ejemplo, también reemplazo el valor del botón según la clase. Vea la línea showBtns[i].value = (modal.classList.contains('hidden')) ? "Show" : "Hide";
const modal = document.querySelector('.modal'); const overlay = document.querySelector('.overlay'); const closeBtn = document.querySelector('.close'); const showBtns = document.querySelectorAll('.show-modal'); for (let i = 0; i < showBtns.length; i++) { showBtns[i].addEventListener('click', function () { console.log('Button Clicked'); modal.classList.toggle('hidden'); showBtns[i].value = (modal.classList.contains('hidden')) ? "Show" : "Hide"; console.log(modal.classList); }); } .hidden { display: none; } <input type="button" class="show-modal" value="Show"> <div class="modal hidden">This is .modal</div>