CODEWITHSUNDEEP
javascripthtmlcssz-indexlightbox
Only4Gamers
Only4Gamers

Reputation: 1

How can I fix the issue with closing my lightbox modal window in HTML and CSS?

I just created a lightbox modal for displaying images. When an image is clicked, a modal window appears with navigation buttons to switch between images. However, there is currently an issue with closing the modal window by clicking on the blank area. It seems that the z-index values of the elements are causing conflicts, despite my attempts to assign different values to them. I would greatly appreciate your assistance in resolving this matter. Thank you.

<style>
/* Mobile Styles */
  @media (max-width: 767px){
    .mySlides img {
      width: 100%;
    }
  }
  
  /* Desktop Styles */
  @media (min-width: 768px) {
    .mySlides img {
      width: 70%;
    }
}
.mySlides img{margin: 0 auto;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;}
.mySlides{height: 100vh;}
  
.background-image {
  position: fixed;
z-index: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  cursor: pointer;
}
* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: auto;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* overflow: auto; */
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  /*background-color: #fefefe;*/
  margin: auto;
  padding: 0;
  width: 100%;
  /* max-width: 1200px; */
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
text-align: center; /* Center the image within the container */
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
z-index: auto;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

img {
  margin-bottom: -4px;
}
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: stretch;
  justify-items: center;
padding: 20px;
  }
.grid img {
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}
</style>

<div  class="parent-cont">
<main class="grid">
  <img onclick="openModal();currentSlide(1)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-2.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(2)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-3.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(3)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-13.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(4)" src="https://only4gamers.net/wp-content/uploads/2023/05/New-12.png" alt="Sample photo">
</main>



</div>
</div>

<div id="myModal" class="modal">
  <img src="https://only4gamers.net/wp-content/uploads/2023/05/Transparent-1-pixel.png" class="background-image" onclick="closeModal()">
  <div class="modal-content">

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-2.png">
    </div>

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-3.png">
    </div>

    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-13.png">
    </div>
    
    <div class="mySlides">
      <img style="z-index: auto;" src="https://only4gamers.net/wp-content/uploads/2023/05/New-12.png">
    </div>
    
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
</div>

https://codepen.io/Only4Gamers/pen/PoyXojW

Upvotes: 0

Views: 182

Answers (1)

Kaashan
Kaashan

Reputation: 382

The image with event handler onclick="closeModal()" is positioned behind the images displayed on modal (referring to images contained inside <div class="modal-content"> as both the images have z-index set to auto. If two elements with same z-index value overlap each other then the one one appearing later in the code will be placed on top.

Fix: Set z-index: 1; in background-image CSS class will fix the issue.

P.S. - Though the issue you have reported will be fixed with above change, it will also cause the modal to be closed when the image displayed on modal is clicked. This will happen because unknowingly user would be clicking on the transparent image that has the closeModal event handler attached and this transparent image is on top of the entire modal content.

A better design would be to attach closeModal event handler on div with class="modal-content" and cancel the click event when the images displayed on modal or the navigation buttons are clicked.

Make all changes below:

HTML

<div  id="parent-cont">
<main class="grid">
  <img onclick="openModal();currentSlide(1)" src="http://only4gamers.net/wp-content/uploads/2023/05/New-2.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(2)" src="http://only4gamers.net/wp-content/uploads/2023/05/New-3.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(3)" src="http://only4gamers.net/wp-content/uploads/2023/05/New-13.png" alt="Sample photo">
  <img onclick="openModal();currentSlide(4)" src="http://only4gamers.net/wp-content/uploads/2023/05/New-12.png" alt="Sample photo">
</main>
</div>

<div id="myModal" class="modal">
  <div class="modal-content" onclick="closeModal()">

    <div class="mySlides" onclick="cancelEvent(event)">
      <img src="http://only4gamers.net/wp-content/uploads/2023/05/New-2.png">
    </div>

    <div class="mySlides" onclick="cancelEvent(event)">
      <img src="http://only4gamers.net/wp-content/uploads/2023/05/New-3.png">
    </div>

    <div class="mySlides" onclick="cancelEvent(event)">
      <img src="http://only4gamers.net/wp-content/uploads/2023/05/New-13.png">
    </div>
    
    <div class="mySlides" onclick="cancelEvent(event)">
      <img src="http://only4gamers.net/wp-content/uploads/2023/05/New-12.png">
    </div>
    
    <a class="prev" onclick="plusSlides(-1, event)">&#10094;</a>
    <a class="next" onclick="plusSlides(1, event)">&#10095;</a>
  </div>
</div>

CSS

/* Mobile Styles */
  @media (max-width: 767px){
    .mySlides img {
      width: 100%;
    }
  }
  
  /* Desktop Styles */
  @media (min-width: 768px) {
    .mySlides img {
      width: 70%;
    }
}
.mySlides img{margin: 0 auto;
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;}
.mySlides{
  height: 100vh;
  width: 70%;
  margin: auto;
}
  
* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: auto;
  padding-top: 10px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* overflow: auto; */
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  /*background-color: #fefefe;*/
  margin: auto;
  padding: 0;
  width: 100%;
  /* max-width: 1200px; */
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
text-align: center; /* Center the image within the container */
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
z-index: auto;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

img {
  margin-bottom: -4px;
}
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.grid { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  align-items: stretch;
  justify-items: center;
padding: 20px;
  }
.grid img {
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  max-width: 100%;
}

JS

function openModal() {
  document.getElementById("myModal").style.display = "block";
  document.getElementById("parent-cont").style.display = "none";
}

function closeModal() {
  document.getElementById("myModal").style.display = "none";
  document.getElementById("parent-cont").style.display = "block";
}

function cancelEvent(event) {
  event.stopPropagation();
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n, event) {
  cancelEvent(event);
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");

  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}

Upvotes: 1

Related Questions