Несколько элементов с всплывающим модулем

Question

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

Взгляните на мой пример: пример здесь

У меня проблема в том, что я хотел бы иметь сетку изображений на сайте:

Посмотрите, какую сетку я имею в виду: введите описание ссылки здесь

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

ПРОБЛЕМА: после того, как я хочу объединить эти два примера, всплывающее окно jQuery перестает работать.

Answer 1

Если вы сохраните такую ​​структуру в HTML:

<a href="#" class="info" id="overlay1">...</a>
<div class="overlay">Content for overlay 1</div>
<a href="#" class="info" id="overlay2">...</a>
<div class="overlay">Content for overlay 2</div>

Береги себя с id потому что это должно быть уникальным и не может быть множественным в документе.

Затем вам нужно изменить свои функции так, чтобы они обрабатывались именами классов, а не их идентификатором:

$(".info").click(function(event) {
  var ne = $(this).next('div.overlay');
  event.preventDefault();
  ne.fadeToggle(500);
  return false;
  $(".close").click(function(event) {
    event.preventDefault();
    ne.fadeToggle(500);
  });
});

Проверьте этот CodePen

Answer 2

Я думаю, что вы хотите изменить переполнение от visible в auto в вашей близкой функции.