使用灯箱画廊

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 class 的 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;
}

使用灯箱画廊

Using a lightbox gallery

java

image

gallery

lightbox