Для l oop и Popup с жидкостью и джекилом

Question

Я хочу создать список модальных всплывающих окон с помощью for-l oop, каждое из которых отображает различный текст. Сайт создан на Jekyll с движком шаблонов Liquid.

В частности, я хочу создать список моих научных c публикаций, для каждой из них по 2 значка: один для записи bibtex и один для аннотации. Эта информация хранится в файле yaml.

Я следую этому простому руководству для модальных всплывающих окон .

Всплывающие окна работают, но текст одинаков для всех записи. Как можно создавать независимые модальные всплывающие окна?

Это html

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#modal"></i></a>
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

, а это код Javascript:

const openModalIcons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalIcons.forEach(icon => {
    icon.addEventListener('click', () => {
        const modal = document.querySelector(icon.dataset.modalTarget)
        openModal(modal)
    })
})

function openModal(modal) {
    if (modal == null) return
    modal.classList.add('active')
    overlay.classList.add('active')
}

closeModalButtons.forEach(button => {
    button.addEventListener('click', () => {
        const modal = button.closest('.modal')
        closeModal(modal)
    })
})

function closeModal(modal) {
    if (modal == null) return
    modal.classList.remove('active')
    overlay.classList.remove('active')
}

overlay.addEventListener('click', () => {
    const modals = document.querySelectorAll('.modal.active')
    modals.forEach(modal => {
        closeModal(modal)
    })
})

Answer 1

Проблема в том, что все ваши модальные окна имеют id="modal", поэтому селектор #modal, вероятно, всегда выбирает первый. Атрибут id должен быть уникальным во всем документе.

Должно работать что-то вроде этого:

{% for papers in papers %}
  {% for content in paper.papers %}
    <a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}"></i></a>
    <div class="modal" id="paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}">
      <div class="modal-header">
        <div class="title">{{content.name}}</div>
        <button data-close-button class="close-button">&times;</button>
      </div>

      <!-- text to display -->
      <div class="modal-body">{{content.text}}</div>
    </div>
  {% endfor %}
{% endfor %}

Вместо счетчика for l oop вы также можете использовать бумагу name в качестве идентификатора (если он уникален), например id="paperModal_{{content.name | slugify}}".

Изменить: отредактировал фрагмент, чтобы использовать forloop.counter и учитывать вложенный для l oop.