Javascript Void JS在弹出区域中单击"；灯箱“；

我正在制作一个超级简单的“灯箱”，它会弹出一个对话框和一个暗淡的背景

我的问题是，我希望当用户单击暗显的背景时覆盖消失，但如果他们在对话框区域中单击，则覆盖消失

到目前为止，我的方法是：

我在包装器中添加了一个带有“display:none；”的类，这样如果单击它就会消失。当然，如果在#对话框中单击，也会使覆盖消失。有没有办法告诉它在对话框区域返回click false？还是一个更好的方法

<div id="overlay" onclick="$(this).addClass('displayNone');">
    <div id="dialogBox">
        <p>Lorem ipsum</p>
</div>
</div><!-- /#overlay -->

同侧眼睑

---

谢谢大家!

这将防止click事件冒泡到关闭灯箱的任何元素：

$('#dialogBox').click(function(e) {
    e.stopPropagation();
})

---

删除内联

onclick

属性/处理程序，并在JavaScript中绑定事件：

$("#overlay").on("click", function (e) {
    if (!$(e.target).closest("#dialogBox").length) {
        $(this).addClass('displayNone');
    }
});

演示：

这将检查

单击是否来自
对话框
元素中的任何位置-如果不是（注意
if
语句中的
！
），它将运行
.addClass（）
部分

参考资料：


.on（）
：
.closest（）
：
@user2124775没问题：）如果需要更多帮助，请告诉我！