Html - How to make popup work correctly on photo gallery

LivinLife
December 28, 2024
75 views
1 vote
2 Answers

I made a popup for each individual image on my photo gallery, but it won’t pop up when I click on it. When I try and click on the image, it registers the click, but doesn’t actually make the popup appear.

I’ve tried re-arranging the button element and messing with the JS code. Overall, I think the issue may be on the CSS side of things.

Here is the relevant code snippet:

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}

.photo-gallery {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.pic {
  margin-top: 130px;
  position: relative;
  height: 230px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px lightgray;
  cursor: pointer;
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.website::before {
  content: "This website!";
  text-align: center;
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.popup {
  display: none;
}


.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;

}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

<div class="photo-gallery">
  <div class="pic website">
    <button onclick="togglePopup()"><img src="https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png" alt="Button Image"></button>
  </div>

  <div class="popup" id="popup-1">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn">&times;</div>
      <h1>Title</h1>
      <p>weeeeeeeewooooooooooo</p>
    </div>
  </div>
</div>

Answers

When you set the active class on your popup, you do not actually unhide the popup itself. You need to add the below code to your CSS.

.popup.active {
   display: block;
}

The below code snippet should have the functionality you want.

function togglePopup() {
  document.getElementById("popup-1").classList.toggle("active");
}

.photo-gallery {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.pic {
  margin-top: 130px;
  position: relative;
  height: 230px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px lightgray;
  cursor: pointer;
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.website::before {
  content: "This website!";
  text-align: center;
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.popup {
  display: none;
}


.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;

}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active {
  display: block;
}

.popup.active .overlay {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

<div class="photo-gallery">
  <div class="pic website">
    <button onclick="togglePopup()"><img src="https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png" alt="Button Image"></button>
  </div>

  <div class="popup" id="popup-1">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn">&times;</div>
      <h1>Title</h1>
      <p>weeeeeeeewooooooooooo</p>
    </div>
  </div>
</div>

Please keep in mind that your code doesn’t have anything to close the popup yet, but I’m assuming you were planning on that functionality once you got the general function of the popup fixed. However, I can provide some assistance with that if needed.

You had a class .overlay on the active class, so the popup was not targetted

.popup.active .overlay {

I advise you to delegate

This code can handle more than one popup and more than one button – it also closes the popup on click on the (X)

Instead of data-tgt you COULD use nextElementSibling but this code allows you to pup the toggle where you want.

It is not really a toggle since you cannot click it to close the popup

I also closed the gallery div and translateY will ignore your second parameter

window.addEventListener('load', () => {
  const gallery = document.querySelector('.photo-gallery');
  const popups = gallery.querySelectorAll('.popup')
  gallery.addEventListener('click', (e) => {
    const open = e.target.closest('button.toggle');
    const close = e.target.closest('div.close-btn');
    if (!open && !close) return; // neither open nor close
    let currentPopup;
    if (open) {
      const dataTarget = open.dataset.tgt;
      currentPopup = document.getElementById(dataTarget);
    } else currentPopup = close.closest('div.popup')
    popups.forEach(popup => {
      popup.classList.toggle("active", popup === currentPopup && !close);
    });
  });
});

.photo-gallery {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.pic {
  margin-top: 130px;
  position: relative;
  height: 230px;
  border-radius: 10px;
  box-shadow: 3px 3px 5px lightgray;
  cursor: pointer;
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.website::before {
  content: "This website!";
  text-align: center;
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

.popup {
  display: none;
}


.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  background: #fff;
  width: 450px;
  height: 220px;
  z-index: 2;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;

}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

<div class="photo-gallery">
  <div class="pic website">
    <button class="toggle" data-tgt="popup-1"><img src="https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png" alt="Button Image"></button>
  </div>

  <div class="popup" id="popup-1">
    <div class="overlay"></div>
    <div class="content">
      <div class="close-btn">&times;</div>
      <h1>Title</h1>
      <p>weeeeeeeewooooooooooo</p>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make popup work correctly on photo gallery

Answers