通过单击背景关闭仅 CSS 灯箱而不使用 Js

我想为我的灯箱添加一个功能，以便在单击背景时它也关闭。

目前，它在单击关闭按钮时关闭。但它也应该在单击背景时关闭，而不是在单击灯箱的内部内容时关闭。

我的灯箱内有一个表单，因此单击灯箱中的任意位置使其关闭不符合我的要求。

有什么方法可以仅使用CSS或PHP来做到这一点，因为此功能将添加到wordpress网站中。

这是我的灯箱示例：

<a href="#lightboxCustom">Click here</a> 
<div id="lightboxCustom">
<div class="lightboxCustomDiv">
<a class="close" href="#_"><span style="color: #fff;">X</span></a>
<center><h2>Title</h2><br></center>
<p>Content </p>
<form>
<input type="text">
<input type= "submit>
</form>
</div>
</div>

.CSS：

.lightboxCustom:target {
outline: none;
display: block;
}
.lightboxCustom{
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
}

使用另一个这样的链接，并将其放在灯箱后面，覆盖整个屏幕，以便它"捕获"灯箱外的所有点击。

我将背景颜色从外部移动到内部div 元素 - 以便链接可以"位于"两者之间，并覆盖内部div 未涵盖的所有内容。

您可能需要添加更多格式以使内部元素在容器等中很好地居中，但基本原则有效。(外面的紧密链接在这里有一个纯红色背景，用于演示目的。

.lightboxCustom:target {
outline: none;
display: block;
}
.lightboxCustom {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.lightboxCustominner {
background: rgba(0, 0, 0, 0.8);
}
.close-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: red;
z-index: -1;
}

<a href="#lightboxCustom">Click here</a>
<div class="lightboxCustom" id="lightboxCustom">
<a class="close-bg" href="#_"></a>
<div class="lightboxCustominner">
<a class="close" href="#_"><span style="color: #fff;">X</span></a>
<center>
<h2>Title</h2><br></center>
<p>Content </p>
<form>
<input type="text">
<input type="submit">
</form>
</div>
</div>

我想，你的灯箱周围有一个变暗的背景，对吧？如果你只想让它成为 CSS，我建议将背景div 做成兄弟姐妹。

<div class="lightboxCustom">
<div class="lightboxCustominner">
</div>
</div>
<div class="lightboxBackdrop">
</div>

.lightboxBackdrop {
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
//you need to play with z-index to make it look right
z-index: 0;
}
.lightboxCustom {
z-index: 1000;
}
.lightboxCustom:target {
display: block;
}
.lightboxCustom:target + .lightboxBackdrop {
display: block;
}

我从来没有做过这样的事情，也不知道它是如何很好地实现可访问性的。

您可以使用此代码

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body, html {
padding: 0;
margin: 0;
text-align: center;
}
a.lightbox img {
height: 150px;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: 94px 20px 20px 20px;
}
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
a.lightbox-close {
display: block;
width:50px;
height:50px;
box-sizing: border-box;
background: white;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
a.lightbox-close:before {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
a.lightbox-close:after {
content: "";
display: block;
height: 30px;
width: 1px;
background: black;
position: absolute;
left: 26px;
top:10px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
.lightboxCustom {
margin-top: 60px;
}
</style>
</head>
<body>
<a class="lightbox" href="#goofy">
Click here
</a> 
<div class="lightbox-target" id="goofy">
<div class="lightboxCustom" id="lightboxCustom">
<div class="lightboxCustominner">
<center>
<h2>Title</h2>
<br>
</center>
<p>Content </p>
<form>
<input type="text">
<input type="submit">
</form>
</div>
</div>
<a class="lightbox-close" href="#"></a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$('.lightbox-target .lightboxCustom').click(function(){
$('.lightbox-target').css({
opacity: 0,
zIndex: 1
});   
});
$('a').click(function(){
$('.lightbox-target#goofy').css({
opacity: 1,
zIndex: 3
});
});
</script>
</body>
</html>

您的代码运行良好，只需要一些 css 样式。

.lightboxCustom:target {
outline: none;
display: block;
}
.lightboxCustom{
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
}
.lightboxCustominner {
margin: auto;
width: 500px;
background: #fff;
padding: 5px;
}
.close {
color: #000;
padding: 5px;
}

<a href="#lightboxCustom">Click here</a> 
<div class="lightboxCustom" id="lightboxCustom">
<div class="lightboxCustominner">
<a class="close" href="#_">X</a>
<center><h2>Title</h2><br></center>
<p>Content </p>
<form>
<input type="text">
<input type= "submit>
</form>
</div>
</div>

相关内容

最新更新

热门标签：