在网格布局中单击时突出显示图像并将其置于最前面

Question

我真的卡住了，希望有人能帮助我。我正在使用网格布局（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,0,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/

Answer 1

你试过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

Answer 2

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

HTML

 <div class="parent">
      <div class="div1">div1 </div>
      <div class="div2">
        <div class="absolute">
          <img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png" width="100px" onClick="zIndex()">
          <div id="myPopup">
            <p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
          </div>
        </div>
      </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">
    </div>
    <div id="cover" onClick="remove()">
    </div>

CSS

.z-index{
  z-index: 4 !important;
}
.absolute{
  position: absolute;
  z-index: 2;
}
#myPopup{
  width: 300px;
  background: red;
}
.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;
}
.parent div{
  width: auto;
}
.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;}

#img:hover{
  cursor: pointer;
}
#overlay{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top:0;
  left: 0;
}
#overlay.show{
  visibility: visible;
  z-index: 3;
}
#cover{
  visibility: hidden;
  width: 100%;
  height: 100vh;
  background: transparent;
  position: absolute;
  top:0;
  left: 0;
}
#cover.show{
  visibility: visible;
  z-index: 5;
}
#myPopup{
  visibility: hidden;
}
#myPopup.show{
  visibility: visible;
}

JavaScript

  function zIndex(){
    $( "div.absolute" ).toggleClass( "z-index" );
    var overlay = document.getElementById("overlay");
    overlay.classList.add("show");
    var cover = document.getElementById("cover");
    cover.classList.add("show");
    var popup = document.getElementById("myPopup");
    popup.classList.add("show");
  }
  function remove(){
    var overlay = document.getElementById("overlay");
    overlay.classList.remove("show");
    var cover = document.getElementById("cover");
    cover.classList.remove("show");
    var popup = document.getElementById("myPopup");
    popup.classList.remove("show");
    $( "div.absolute" ).removeClass( "z-index" );
  }

https://jsfiddle.net/wxgo0tky/4/

在网格布局中单击时突出显示图像并将其置于最前面

Highlight an image on click in grid layout and bring it to front

html

javascript

css

grid

positioning