Javascript 在子div外部单击关闭lightbox

我在不使用jquery插件的情况下创建了一个lightbox，现在我正试图通过单击

close

按钮或单击白色区域以外的任何地方（

.white\u content

）来关闭它

<button onclick="document.getElementById('lightbox').style.display='inline';">
    Show lightbox
</button>

<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none">
    <div class="white_content">
        <a href="javascript:void(0)" onclick="document.getElementById('lightbox').style.display='none';" class="textright">Close</a>
            <p>Click anywhere to close the lightbox.</p>
            <p>Use Javascript to insert anything here.</p>
    </div>
</div>
<!-- LIGHTBOX CODE END -->

---

你可以像下面这样改变你的状态

$(document).on('click', function(event) {
    if ($(event.target).has('.white_content').length) {
        $(".lightbox").hide();
    }
});

---

大多数lightbox脚本使用两个div-s，content和overlay。覆盖层是有背景的，可以防止用户点击页面内容，而且点击覆盖层也可以用来关闭lightbox

HTML:

---

您希望在任何不是针对lightbox或其子项的单击时关闭lightbox。您现有的代码非常接近：

$(document).on('click', function(event) { 
    if (!$(event.target).closest('button').length &&
        !$(event.target).closest('.white_content').length) {
        $(".lightbox").hide();
    }
});

$（文档）.on（'click'，函数（事件）{
if（！$（event.target）.closest（'button'）.length&&
！$（event.target）.最近（'.white_content'）.长度）{
$（“.lightbox”）.hide（）；
}
});
.textright{
浮动：对；
}
.灯箱{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,8）；
}
.white_内容{
位置：绝对位置；
最高：25%；
左：25%；
宽度：50%；
身高：50%；
填充：16px；
边框：5px纯灰；
背景色：白色；
z指数：1002；
溢出：自动；
}

展示灯箱
单击任意位置以关闭灯箱

使用Javascript在此处插入任何内容

brilliant，它以class.white\u内容的子元素为目标，并排除其点击操作，完美、简单、优秀。
<div id="lightbox"> LIGHTBOX CONTENT </div>
<div id="overlay"></div>

$( '#overlay, #close').on('click', function(event) {
    $("#lightbox, #overlay").hide();
});

$( '#show').on('click', function(event) {
    $("#lightbox, #overlay").show();
});

$(document).on('click', function(event) { 
    if (!$(event.target).closest('button').length &&
        !$(event.target).closest('.white_content').length) {
        $(".lightbox").hide();
    }
});