Как исправить не отображаемые модалы? - PullRequest
Новая
       20

Как исправить не отображаемые модалы?

0 голосов
/ 11 января 2019

У меня есть серия из 6 модалей, которые создаются с помощью цикла работы с флешкой / jinja2, и 1 модал, который является примером вне цикла. Все модалы заполняются и заполняются правильно при просмотре исходного кода страницы. Пример модального режима, который находится за пределами цикла, отображается без проблем, однако остальные 6 модальных режимов не будут срабатывать.

https://www.sfiltrowani.pl/filter_instructions - это живой сайт с проблемой. https://github.com/rscales02/sfiltrowani - это хранилище полного кода git.

Это приложение для колб, работающих на эластичных бобовых стеблях AWS. Мне удалось получить пример модального показа, определив модальный идентификатор и цель данных вручную, это были единственные изменения, которые я сделал из копии / вставки исходного модального кода и оригинальной ссылки на модалы.

пример ссылки на идентичные ссылки из A-F 

<a href="#" data-toggle="modal" data-target="#instrukcjaF.jpg   ">{{ _('(instrukcja photo F)') }}</a>

модальный цикл для создания модальных изображений для инструкций 

{% for image in images %}

<!-- Modal -->

<div class="modal fade" id="{{ image }}" role="dialog">

<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>

  </div>
 </div>
 {% endfor %}

Ожидаемые результаты модал, который срабатывает для каждой фотографии в моих инструкциях. Текущий результат только пример модального покажет.

[Изменить] Я новичок в стеке, отредактирован, чтобы показать 3 строки кода, которые были скрыты из-за отсутствия отступов. Спасибо и извините!

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Я исправил это! Казалось бы, модальные идентификаторы чувствительны к определенному форматированию, а не только к случайным строкам. Предыдущая версия, которая не работала, имела id и data-target с 'instrukcja*.jpg', когда '.jpg' был удален, модальные функции прекрасно работают.

0 голосов
/ 11 января 2019

Ваша ссылка не указывает на модал для показа.

Модалу нужен идентификатор, на который ссылается data-target

<a href="#" data-toggle="modal" data-target="#this-modal-id">{{ _('(instrukcja photo F)') }}</a>

<div class="modal-dialog"  id="this-modal-id">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
...