Question

很久以前，我上次编写了一个网站，我刚刚开始创建一个投资组合网站来展示我的照片，我的照片是我在页面上的拇指图像将此脚本用于灯箱： https://www.w3schools.com/howto/howto_js_lightbox.asp 它既简单又简单，但它不能用我的网站布局工作，我的mainnav将鼠标悬停在图像上，并试图通过这个脚本来防止这种情况：

// 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;
}

使用灯箱库

1 个答案: