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

Question

我真的很困，希望有人能帮我。我使用的是网格布局(flexbox稍后作为后备解决方案，但这应该没有什么区别(，并且有一些服务器图像，点击时需要在前面，后面应该是一个弹出窗口(重叠(，后面是一个覆盖，你可以通过它看到背景，即网格布局。

到目前为止，我已经成功地在单击时打开了弹出窗口和覆盖div，并在再次单击后关闭它。我看不出如何通过更改例如z索引来创建我需要的订单。当我点击它时，我只需要把甜甜圈放在其他东西上面…有什么想法吗？

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吗？这是一个很好的工具，你可以使用。只需将数据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/