Multiple elements with popup module

Question

I have an example of modal popup, where the scrolling is blocked in the back, but it is enabled in the pop-up itself.

Take a look at my example: Example here

The problem i have is, that i would like to have a grid of images in the website:

Take a look what kind of grid i mean: enter link description here

After a user would click on one of those images, he would get an popup with different images. But off course the popup images would be different for each photo the users click, it's a portfolio of different project.

PROBLEM: after i want to combine those two examples, the jQuery popup stops working.

Answer 1

If you keep an structure like this in 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>

Take in care with the id because that need to be unique and can't be multiple in the document.

Then you need to change your functions to be handle by the classnames and not the id like this:

$(".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);
  });
});

Check this CodePen

Answer 2

I think you want to change the overflow from visible to auto in your close function.