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

Question

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

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

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

有什么方法可以仅使用 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);
}

Answer 1

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

我将背景颜色从外部 div 元素移到了内部 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>