在网格布局中单击时突出显示图像，然后将其放到最前面

如何解决在网格布局中单击时突出显示图像，然后将其放到最前面

我真的很困，希望有人能帮助我。我使用的是网格布局（稍后将flexbox作为后备解决方案，但这应该没有什么区别），并且服务器图像必须在单击时位于前面，后面应该是弹出窗口（重叠），而后面应该是覆盖图您可以看到背景，即网格布局。

到目前为止，我已经设法在单击时打开弹出窗口和叠加层div，然后再次单击将其关闭。我看不到如何进行更改，例如z-index创建我需要的订单。 我所需要的只是当我单击它时将甜甜圈放在其他任何东西上…… 有什么想法吗？

HTML

<div class="parent">
    <div class="div1">div1 </div>
    <div class="div2 popup">
      <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onclick="myFunction()">
      <span class="popuptext" id="myPopup">Popup text...</span>
    </div>
    <div class="div3">div3 </div>
    <div class="div4">div4 </div>
    <div class="div5">div5 </div>
    <div class="div6">div6 </div>
    <div class="div7">div7 </div>
    <div class="div8">div8 </div>
    <div class="div9">div9 </div>
  </div>
  <div id="overlay" onclick="remove()">

CSS


 .parent {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(4,1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 100vh;
  }
  .div1 { grid-area: 1 / 1 / 3 / 2; background-color: yellow;}
  .div2 { grid-area: 1 / 2 / 2 / 3; background-color: red;}
  .div3 { grid-area: 1 / 3 / 2 / 4; background: blue;}
  .div4 { grid-area: 1 / 4 / 2 / 5; background: grey;}
  .div5 { grid-area: 3 / 1 / 5 / 2; background: pink;}
  .div6 { grid-area: 2 / 2 / 4 / 4; background: white;}
  .div7 { grid-area: 2 / 4 / 4 / 5; background: purple;}
  .div8 { grid-area: 4 / 2 / 5 / 4; background: black;}
  .div9 { grid-area: 4 / 4 / 5 / 5; background: green;}

.popup {
 position: relative;
 display: inline-block;
 cursor: pointer;
}

.popup .popuptext {
 visibility: hidden;
 width: 160px;
 background-color: #555;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 8px 0;
 position: absolute;
 z-index: 1;
 left: 50%;
 margin-left: -80px;
}

.popuptext.show {
 visibility: visible;
}

#overlay{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: rgba(0,.5);
  position: absolute;
  top:0;
  left: 0;
}
#overlay.show{
  visibility: visible;
}

JavaScript

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.add("show");
  var overlay = document.getElementById("overlay");
  overlay.classList.add("show");
}
function remove(){
  var overlay = document.getElementById("overlay");
  overlay.classList.remove("show");
  var popup = document.getElementById("myPopup");
  popup.classList.remove("show");
}

我们非常感谢您的帮助。

https://jsfiddle.net/3L20ndw7/

解决方法

您尝试过fancybox吗？它是您可以使用的出色工具。只需将data-fancybox属性添加到图像中即可

<div class="div1">div1 </div>
<div class="div2 popup">
  <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" data-fancybox >Popup text...</span>
</div>
<div class="div3">div3 </div>
<div class="div4">div4 </div>
<div class="div5">div5 </div>
<div class="div6">div6 </div>
<div class="div7">div7 </div>
<div class="div8">div8 </div>
<div class="div9">div9 </div>

` 确保将引用添加到库中

https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.js
https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css

如果有人感兴趣，我已经解决了。我不知道这是否是最好的方法，但似乎可行：