java - 使用灯箱画廊

Question

很久以前，我上次编写了一个网站脚本，我刚刚开始制作一个作品集网站来显示我的照片，我将我的所有照片作为页面上的拇指图像，并将此脚本用于灯箱: https://www.w3schools.com/howto/howto_js_lightbox.asp它很好很简单，但它不适用于我的网站布局，我的主导航将鼠标悬停在图像上，并尝试通过此脚本来防止这种情况:

// Open the Modal
function openModal() {
  document.getElementById('myModal').style.display = "block";
  var mainnav = document.getElementsByClassName("hoc clear");
  mainnav[slideIndex-1].style.display = "none";
}
// Close the Modal
function closeModal() {
  document.getElementById('myModal').style.display = "none";
  var mainnav = document.getElementsByClassName("hoc clear");
  mainnav[i].style.display = null;
}

现在我的导航栏将保留在图像上方，但是当您关闭图像时，它不会删除我给他的样式？有人可以帮我吗？

网站 http://www.kiekda.eu/p/gallery

Answer 1

您可以尝试将 .modal CSS 类的 z-index 更改为更高的数字 - 将其从 z-index: 1; 更改为 z-index: 9999;:

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}