Php 通过单击背景而不使用Js关闭仅CSS lightbox

我想为我的lightbox添加一个功能，这样它在单击背景时也会关闭

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

我的灯箱中有一个表单，因此在点击灯箱中的任何位置时关闭它并不符合我的要求

是否有任何方法可以做到这一点，我只使用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>

.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);
}

---

我猜，你的灯箱周围有一个变暗的背景，对吗？如果您只想将其设置为CSS，我建议将background div设置为兄弟

.lightboxbackground{
显示：无；
位置：固定；
z指数：999；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgba（0,0,0,0.8）；
//您需要使用z-index使其看起来正确
z指数：0；
}
.lightboxCustom{
z指数：1000；
}
.lightboxCustom：目标{
显示：块；
}
.lightboxCustom:target+.LightboxBackground{
显示：块；
}

我从未做过类似的事情，也不知道它在可访问性方面的效果如何

您可以使用此代码

你好，世界！
正文，html{
填充：0；
保证金：0；
文本对齐：居中；
}
a、 灯箱img{
高度：150像素；
边框：3倍纯白；
盒影：0px 0px 8px rgba（0,0,0,3）；
利润率：94px 20px 20px 20px；
}
.灯箱目标{
位置：固定；
前-100%；
宽度：100%；
背景：rgba（0,0,0,7）；
宽度：100%；
不透明度：0；
-webkit过渡：不透明度。5s易入易出；
-moz过渡：不透明度。5s缓进缓出；
-o型过渡：不透明度。5s缓进缓出；
过渡：不透明度。5s缓进缓出；
溢出：隐藏；
}
.灯箱目标img{
保证金：自动；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
最大高度：0%；
最大宽度：0%；
边框：3倍纯白；
盒影：0px 0px 8px rgba（0,0,0,3）；
框大小：边框框；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
}
a、 灯箱关闭{
显示：块；
宽度：50px；
高度：50px；
框大小：边框框；
背景：白色；
颜色：黑色；
文字装饰：无；
位置：绝对位置；
顶部：-80px；
右：0；
-webkit转换：.5s轻松输入输出；
-moz转换：.5s易进易出；
-o型过渡：.5s易进易出；
过渡：.5s易进易出；
}
a、 灯箱关闭：之前{
内容：“；
显示：块；
高度：30px；
宽度：1px；
背景：黑色；
位置：绝对位置；
左：26px；
顶部：10px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
a、 灯箱关闭：之后{
内容：“；
显示：块；
高度：30px；
宽度：1px；
背景：黑色；
位置：绝对位置；
左：26px；
顶部：10px；
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
.灯箱目标：目标{
不透明度：1；
排名：0；
底部：0；
}
.灯箱目标：目标img{
最大高度：100%；
最大宽度：100%；
}
.灯箱目标：目标a.灯箱关闭{
顶部：0px；
}
.lightboxCustom{
边缘顶部：60像素；
}
标题


内容

$（'.lightbox target.lightboxCustom'）。单击（函数（）{
$（'.lightbox目标'）.css({
不透明度：0，
zIndex:1
});   
});
$（'a'）。单击（函数（）{
$（'.lightbox target#goofy'）.css({
不透明度：1，
zIndex:3
});
});

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

.lightboxCustom:目标{
大纲：无；
显示：块；
}
.lightboxCustom{
显示：无；
位置：固定；
z指数：999；
宽度：100%；
身高：100%；
排名：0；
左：0；
背景：rgba（0,0,0,0.8）；
填充：10px；
}
.lightboxCustominner{
保证金：自动；
宽度：500px；
背景：#fff；
填充物：5px；
}
.结束{
颜色：#000；
填充物：5px；
}

标题

内容

使用另一个这样的链接，把它放在你的灯箱后面，覆盖整个屏幕，这样它就能“捕捉”灯箱外的所有点击

我将背景色从外部的div元素移到了内部的div元素，这样链接就可以“位于”两者之间，并覆盖内部div未覆盖的所有内容

您可能还需要添加一些