Bootstrap-модал не срабатывает внутри цикла django for

Я хочу прикрепить модал ко всем изображениям. Но по какой-то причине модальное окно не срабатывает, и вся страница становится некликабельной.

Я убедился, что все триггеры модалов и модалы имеют уникальный идентификатор, но безрезультатно.

Может ли кто-нибудь понять, что я делаю не так?

         {% for photo in user_photos %}
            <div class="image-container">
               <div class="image-wrapper" data-bs-toggle="modal" data-bs-target="#photoModal{{photo.id}}">
                  <img src="{{ photo.photo.url }}" alt="Användarbilder">
                  {% if request.user == photo.user %}
                     <form method = "POST">
                        {% csrf_token %}
                        <i class="bi bi-x-lg profile_delete_photo" title="Radera" data-photoId = "{{photo.pk}}" data-url = "{% url 'profilepage_app:deletePhotoAjax' %}"></i>
                     </form>
                  {% endif %}
               </div>
               <span>Uppladdat: {{ photo.timesince }}</span>
               
               <!-- Modal -->
               <div class="modal fade" id="photoModal{{photo.id}}" tabindex="-1" aria-labelledby="photoModallabel" aria-hidden="true">
                  <div class="modal-dialog">
                     <div class="modal-content">
                        <div class="modal-header">
                           <h1 class="modal-title fs-5" id="photoModal{{photo.id}}Label">Modal title</h1>
                           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                           ...
                        </div>
                        <div class="modal-footer">
                           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                           <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                     </div>
                  </div>
               </div>

            </div>
         {% endfor %}

У меня также есть этот цикл for и модальное окно на другой странице, но оно работает нормально.

Вернуться на верх