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

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

0 голосов
/ 26 мая 2018

Я пытаюсь создать модальное всплывающее окно, используя 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");
  });
});

1 Ответ

0 голосов
/ 27 мая 2018

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

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

FIRST: нет открытия <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.

SECOND: Получить 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>
...