Почему Modal Popup с Jekyll и bootsratp показывает только содержимое последнего ребенка?

Question

Я пытаюсь создать модальное всплывающее окно, используя jekyll и bootstrap. Проблема в том, что в каждом всплывающем окне отображается только последний дочерний элемент в информации цикла, а не этот конкретный дочерний элемент. Я попробовал несколько разных идей, чтобы решить эту проблему, но я не могу понять это.

Ниже приведен код, который у меня есть для проекта, над которым я работаю. Что я делаю неправильно?

Заранее спасибо за помощь!

HTML:

{% for stone in site.data.stones %}

<div class="popup-content">
  <h1>{{ stone.color }}</h1>
  <button class="close">Close</button>
</div>
</div>
<div class="popup-hold">
  <h1>{{ stone.gem }}</h1>
  <button class="open">Open</button>
</div>

{% endfor %}

CSS:

.popup-overlay {
   visibility: hidden;
   position: absolute;
   background: grey;
   height: 50%;
   width: 50%;
   left: 25%;
}

.popup-overlay.active {
   visibility: visible;
   z-index: 1;
}

.popup-content {
   visibility: hidden;

}

.popup-content.active {
   visibility: visible;
   z-index: 1;
}

.popup-hold {
   height: 330px;
   border: 2px solid black;
}

stones.yml:

- gem: Mind
  color: yellow

- gem: Time
  color: green

- gem: Soul
  color: orange

Jquery:

$(document).ready(function(e) {
 // adds "active" class to overlay and content
  $(".open").on("click", function(){
    $(".popup-overlay, .popup-content").addClass("active");
  });
  // removes "active" class from overlay and content
  $(".close, .popup-overlay").on("click", function(){
    $(".popup-overlay, .popup-content").removeClass("active");
  });
});

Answer 1

Вы не дали нам полную картину - так что трудно помочь.

Тем не менее, я подозреваю, что есть две (2) разные проблемы.

ПЕРВЫЙ: нет открытия <div class="pop-overlay> в цикле Джекила.

Измените вашу жидкостную петлю, чтобы включить начальный div для наложения каждого камня:

{% for stone in site.data.stones %}

<div class="popup-overlay"> // Add this opening div
  <div class="popup-content">
    <h1>{{ stone.color }}</h1>
    <button class="close">Close</button>
  </div>
</div>

<div class="popup-hold">
  <h1>{{ stone.gem }}</h1>
  <button class="open">Open</button>
</div>

{% endfor %}

Возможно, вам придется удалить любой одиночный открывающий div перед циклом в вашем коде - если у вас есть div для этого.

ВТОРОЕ: Получить jquery ТОЛЬКО чтобы открыть связанный (предыдущий) модальный

Эта проблема в том, что ваш jquery открывает ВСЕ модалы на странице - в зависимости от того, что .open кнопку, которую вы нажимаете.

Вы можете видеть только последний, потому что он "на вершине" других модалов - в зависимости от вашего стиля.

Попробуйте изменить свой jquery так, чтобы при нажатии на .open Кнопка, открывается только предыдущий / связанный модальный элемент (в отличие от всех).

Попробуйте что-то вроде этого jquery:

<script>
$(document).ready(function(e) {
 // adds "active" class to overlay and content
  $(".open").on("click", function(){
    $(this).parent().prev(".popup-overlay").addClass("active");
    $(this).parent().prev(".popup-overlay").find(".popup-content").addClass("active");
  });
  // removes "active" class from overlay and content
  $(".close").on("click", function(){
    $(".popup-overlay, .popup-content").removeClass("active");
  });
});
</script>

ПРИМЕЧАНИЕ. Этот скрипт закроет все открытые модалы при нажатии любой из кнопок закрытия.

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

Мне приходилось догадываться о том, как вы это настроили, но я надеюсь, что это поможет.

Если это не работает, то вы должны предоставить полный вывод html или лучший рабочий пример.

Вот демонстрация того, как я ДУМАЮ, что вы хотите запустить:

$(document).ready(function(e) {
  // adds "active" class to overlay and content
  $(".open").on("click", function() {
    $(this).parent().prev(".popup-overlay").addClass("active");
    $(this).parent().prev(".popup-overlay").find(".popup-content").addClass("active");
  });
  // removes "active" class from overlay and content
  $(".close").on("click", function() {
    $(".popup-overlay, .popup-content").removeClass("active");
  });
});

  .popup-overlay {
  visibility: hidden;
  position: absolute;
  background: grey;
  height: 50%;
  width: 50%;
  left: 25%;
}

.popup-overlay.active {
  visibility: visible;
  z-index: 1;
}

.popup-content {
  visibility: hidden;
}

.popup-content.active {
  visibility: visible;
  z-index: 1;
}

.popup-hold {
  height: 330px;
  border: 2px solid black;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="popup-overlay">
  <div class="popup-content">
    <h1>yellow</h1>
    <button class="close">Close</button>
  </div>
</div>

<div class="popup-hold">
  <h1>Mind</h1>
  <button class="open">Open</button>
</div>


<div class="popup-overlay">
  <div class="popup-content">
    <h1>Green</h1>
    <button class="close">Close</button>
  </div>
</div>

<div class="popup-hold">
  <h1>Time</h1>
  <button class="open">Open</button>
</div>


<div class="popup-overlay">
  <div class="popup-content">
    <h1>Orange</h1>
    <button class="close">Close</button>
  </div>
</div>

<div class="popup-hold">
  <h1>Soul</h1>
  <button class="open">Open</button>
</div>