Deseo usar el modal a continuación en varias áreas en la misma página, pero debido a que tiene un elemento de identificación, solo funciona una vez, ¿alguien puede ayudarme aquí para que funcione tantas veces en la misma página?
Intenté lo siguiente, pero al hacer clic en el botón no se abre nada.
js coxe
var modal = document.getElementById("myModal"); var btn = document.getElementById(".myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }aquí está el html
<button class="myBtn">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p><?php echo $row['domainid'];?></p> </div> </div>y aquí está el código html + js de trabajo completo
<button id="myBtn">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p><?php echo $row['domainid'];?></p> </div> </div> <script> var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script>por favor alguien que me ayude aquí. Muchas gracias por adelantado
Solo un pequeño error en tu código. Está seleccionando la clase myBtn usando getElementById .
Código antiguo:
var btn = document.getElementById(".myBtn");Nuevo código:
var btn = document.getElementByClassName("myBtn"); //Don't use . (dot)O:
var btn = document.querySelector(".myBtn"); //Use . (dot)getElementsByClassName devuelve una colección de elementos. Entonces, para agregar un detector de eventos a cada uno de ellos, debe hacer un bucle en esa colección.
Entonces, si el modal es siempre el nextElementSibling del botón, es fácil apuntarlo.
Otro método de orientación útil es el más cercano () que utilicé para apuntar a un padre del event.target (el modal).
var btns = Array.from(document.getElementsByClassName("myBtn")); var spans = Array.from(document.getElementsByClassName("close")); btns.forEach(function(btn) { btn.addEventListener("click", function() { this.nextElementSibling.style.display = "block"; }) }) spans.forEach(function(span) { span.addEventListener("click", function() { this.closest(".modal").style.display = "none"; }) }) window.onclick = function(event) { let modal = event.target.closest(".modal"); if (modal) { modal.style.display = "none"; } } .modal { display: none; } <button class="myBtn">Open Modal 1</button> <div class="modal"> <div class="modal-content"> <span class="close">×</span> <p> Hello 1 </p> </div> </div> <hr> <button class="myBtn">Open Modal 2</button> <div class="modal"> <div class="modal-content"> <span class="close">×</span> <p> Hello 2 </p> </div> </div> <hr> <button class="myBtn">Open Modal 3</button> <div class="modal"> <div class="modal-content"> <span class="close">×</span> <p> Hello 3 </p> </div> </div>