Question

这个灯箱运行良好，但我很好奇如何在没有Javascript的情况下关闭它，只要点击周围区域。用Javascript / JQuery完成它很简单，但是我想看看如何在没有Javascript / JQuery的情况下完成它。感谢

    .black_overlay{
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
    }
    .white_content {
        display: none;
        position: absolute;
        top: 20%;
        left: 20%;
        width: 55%;
        height: 55%;
        padding: 16px;
        border:  1px solid lightgray;
        background-color: white;
        z-index:1002;
        overflow: auto;
    }

<body>
    <p> <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">click here</a></p>
    <div id="light" class="white_content">Content and stuff. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay"></div>
</body>

Answer 1

仅CSS灯箱 的快速谷歌通过 Gregory Schier （完全信用）发现了这个有趣的代码笔示例

http://codepen.io/gschier/pen/HCoqh

Gregory正在使用:target伪类选择器来显示灯箱，方法是将其显示属性设置为block，从而使灯箱可见。

.lightbox {
    display: none;
}

.lightbox:target {
    display: block;
}

灯箱的目标状态由包裹缩略图图像的<a>触发。这是通过参考灯箱来完成的。如by this W3C guide

所述，锚点href属性中的id

<a href="#[LIGHTBOX_ID]">
  <img src="../path/to/image-thumbnail.jpg">
</a>

<a href="#_" id="[LIGHTBOX_ID]">
  <img src="..path/to/image-full.jpg">
</a>

请勿忘记使用#包装缩略图的链接的href属性为灯箱ID加上前缀（如上图所示）。

再次，完全归功于 Gregory Schier

Answer 2

对于仅支持CSS的解决方案，您可以采用CSS :focus作为Javascript onclick的（稍加设计的）替代。

当然，<p>元素自然不支持:focus，因此还需要添加contentEditable="true"，以便它可以接受:focus：

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 20%;
    left: 20%;
    width: 55%;
    height: 55%;
    padding: 16px;
    border:  1px solid lightgray;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

p {
display: inline-block;
}

a {
color: rgb(0,0,255);
cursor: pointer;
text-decoration: underline;
}

p:focus ~ #light, p:focus ~ #fade {
display: block;
cursor: default;
}

<p contentEditable="true"><a>Click here</a></p>
<div id="fade" class="black_overlay"></div>
<div id="light" class="white_content">Content and stuff. <a>Close</a></div>

在外部区域单击鼠标时是否可以关闭灯箱（仅限CSS）

2 个答案: