Estoy tratando de abrir un Pop up Model en for loop for para cada instancia, pero el pop up model se abre para la primera instancia, pero no se abre para otras instancias. Estoy usando Django en el bucle de plantilla.
plantilla.html
{% for comment in comments %} <button id="ModelButton">Open Model</button> <div id="Model" class="flagModel"> <div class="modal-content"> <div class="modal-mod"> <div class="container-fluid"> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{form}} <input type="submit"> </form> </div> </div> </div> </div> <script> var formModel= document.getElementById("Model"); var formButton = document.getElementById("ModelButton"); formButton .onclick = function () { formModel.style.display = "block"; } window.onclick = function (event) { if (event.target == formModel) { formModel.style.display = "none"; } } </script> {% endfor %} Cuando coloco el JavaScript fuera del for loop , ni siquiera funciona para uno.
Lo he intentado muchas veces pero sigue sin funcionar. Cualquier ayuda sería muy apreciada. Gracias
Especifique identificaciones únicas para los modales y pase el número de identificación a una sola función para abrir formularios modales al hacer clic en sus respectivos botones.
{% for comment in comments %} <button onclick="openModal({{forloop.counter}})"> Open Model </button> <div id="Modal-{{forloop.counter}}" class="flagModel"> <div class="modal-content"> <div class="modal-mod"> <div class="container-fluid"> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{form}} <input type="submit"> </form> </div> </div> </div> </div> {% endfor %} <script> function openModal(id) { var formModal = document.getElementById(`Modal-${id}`); if (formModal) { formModal.style.display = "block"; } } window.onclick = function (event) { if (event.target == formModel) { formModel.style.display = "none"; } } </script>La identificación debe ser única en una página, debe usar la clase en bucle en lugar de la identificación,
Aquí he actualizado tu script que puede ayudarte.
{% for comment in comments %} <button class="ModelButton">Open Model</button> <div class="flagModel Model"> <div class="modal-content"> <div class="modal-mod"> <div class="container-fluid"> <form method="post" enctype="multipart/form-data"> {% csrf_token %} {{form}} <input type="submit"> </form> </div> </div> </div> </div> <script> var formButton = document.querySelectorAll(".ModelButton"); formButton.forEach(function(element) { element.addEventListener('click', function(eventObj) { var formModel = eventObj.currentTarget.nextElementSibling; formModel.style.display = "block"; formModel.addEventListener('click', function(event) { eventObj.currentTarget.style.display = "none"; }); }) }); </script> {% endfor %}