Modal images gallery – why it jumps to top after close?

March 16, 2023

I’m trying to create modal images gallery – you can click first or second image to zoom in. But the problem is, it jumps to top after you close the image! Is it possible to make it so when you close, it just stays at previous position on webpage, instead of scrolling to top?

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}


.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
   
  }
  
  /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
  
  .lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
    
  }
  
  /* Styles the close link, adds the slide down transition */
  
  a.lightbox-close {
  display: block;
  width:50px;
  height:50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  }
  
  /* Provides part of the "X" to eliminate an image from the close link */
  
  a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  }
  
  /* Provides part of the "X" to eliminate an image from the close link */
  
  a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  }
  
  /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
  
  .lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow:scroll;
  }
  
  .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  }
  
  .lightbox-target:target a.lightbox-close {
  top: 0;
  }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal images test</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <a class="lightbox" href="#dog"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"></a>
      <a class="lightbox" href="#dog2"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"></a>
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>

   <div class="lightbox-target" id="dog">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
      <a class="lightbox-close" href="#"></a>
   </div>
   <div class="lightbox-target" id="dog2">
    <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
    <a class="lightbox-close" href="#"></a>
 </div>
  </body>
</html>

Just click first or second image (from top), scroll down a bit and then close image.

>Solution :

This should work

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}


.lightbox-target {
  position: fixed;
  top: -100%;
  width: 100%;
  background: rgba(0,0,0,.7);
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  overflow: hidden;
   
  }
  
  /* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
  
  .lightbox-target img {
  margin: auto;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom: 0;
  max-height: 0%;
  max-width: 0%;
  border: 3px solid white;
  box-shadow: 0px 0px 8px rgba(0,0,0,.3);
  box-sizing: border-box;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
    
  }
  
  /* Styles the close link, adds the slide down transition */
  
  a.lightbox-close {
  display: block;
  width:50px;
  height:50px;
  box-sizing: border-box;
  background: white;
  color: black;
  text-decoration: none;
  position: absolute;
  top: -80px;
  right: 0;
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  }
  
  /* Provides part of the "X" to eliminate an image from the close link */
  
  a.lightbox-close:before {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
  }
  
  /* Provides part of the "X" to eliminate an image from the close link */
  
  a.lightbox-close:after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: black;
  position: absolute;
  left: 26px;
  top:10px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
  }
  
  /* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
  
  .lightbox-target:target {
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow:scroll;
  }
  
  .lightbox-target:target img {
  max-height: 100%;
  max-width: 100%;
  }
  
  .lightbox-target:target a.lightbox-close {
  top: 0;
  }
  
  .lightbox-open {
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

.lightbox-open img {
  max-height: 100%;
  max-width: 100%;
}

.lightbox-open a.lightbox-close {
  top: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal images test</title>
   
  <script>
  function openLightbox(lightboxId) {
    const lightbox = document.getElementById(lightboxId);
    document.body.style.overflowY = "hidden";
    lightbox.classList.add('lightbox-open');
  }

  function closeLightbox(lightboxId) {
    const lightbox = document.getElementById(lightboxId);
    lightbox.classList.remove('lightbox-open');
    document.body.style.overflowY = "scroll";
  }
  </script>
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
     <a class="lightbox" onclick="openLightbox('dog')"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"></a>

    <a class="lightbox" onclick="openLightbox('dog2')"><img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"></a>


      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>

   <div class="lightbox-target" id="dog">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"/>
      <a class="lightbox-close" onclick="closeLightbox('dog')"></a>
   </div>
   <div class="lightbox-target" id="dog2">
    <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg"/>
<a class="lightbox-close" onclick="closeLightbox('dog2')"></a>
 </div>
  </body>
</html>

Basically, short version of what I did is here:

  function openLightbox(lightboxId) {
    const lightbox = document.getElementById(lightboxId);
    document.body.style.overflowY = "hidden";
    lightbox.classList.add('lightbox-open');
  }

  function closeLightbox(lightboxId) {
    const lightbox = document.getElementById(lightboxId);
    lightbox.classList.remove('lightbox-open');
    document.body.style.overflowY = "scroll";
  }

.lightbox-open {
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow: scroll;
}

.lightbox-open img {
  max-height: 100%;
  max-width: 100%;
}

.lightbox-open a.lightbox-close {
  top: 0;
}

<a class="lightbox" onclick="openLightbox('dog')">
  <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
 </a>
<a class="lightbox" onclick="openLightbox('dog2')">
  <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
</a>

<!-- ... -->

<a class="lightbox-close" onclick="closeLightbox('dog')"></a>
<a class="lightbox-close" onclick="closeLightbox('dog2')"></a>