我想为我的灯箱添加一个功能，以便在单击背景时也将其关闭。
目前，单击关闭按钮可关闭它。但它也应该在单击背景时关闭，而不是在单击灯箱的内部内容时关闭。
我的灯箱内有一个表单，因此无法在灯箱中的任何位置单击以使其无法满足我的要求。
有什么方法可以仅使用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);
}
答案 0 :(得分：1)
使用另一个此类链接，并将其放置在灯箱后面，覆盖整个屏幕，以便它“吸引”灯箱外部的所有点击。
我将背景颜色从您的外部元素移到了内部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>
答案 1 :(得分：0)
我认为，您的灯箱周围背景较暗，对不对？如果您只想将其设为CSS，则建议将background 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;
}
我从来没有做过这样的事情，也不知道如何有效地实现可访问性。
答案 2 :(得分：0)
您可以使用此代码
<!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>
答案 3 :(得分：0)
您的代码运行正常，只需要一些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>