java - 使用灯箱图库

很久以前，我上次编写了一个网站脚本，我刚刚开始制作一个投资组合网站来显示我的照片，我将我的照片作为拇指图像放在页面上，并将此脚本用于灯箱：
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

最佳答案

您可以尝试将.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;
}