javascript - Void JS单击“灯箱”的弹出区域

我正在制作一个超级简单的“灯箱”，它弹出一个对话框，并且背景变暗。

我的问题是，我希望当用户单击暗淡的背景时覆盖消失，但是如果用户单击对话框区域则不希望覆盖消失。

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

我添加了一个带有“ display：none;”的类。到包装器，因此如果单击，它将消失。当然，如果单击#dialogBox，这也会使覆盖消失。有什么办法告诉它在dialogBox区域中返回click false？还是解决这个问题的更好方法？

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

谢谢！

最佳答案

删除内联onclick属性/处理程序，并在JavaScript中绑定事件：

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

演示：http://jsfiddle.net/A7rNE/

这将检查click是否来自#dialogBox元素内的任何地方-如果不是（请注意!语句中的if），它将运行.addClass()部分。

参考文献：

.on()：http://api.jquery.com/on/
.closest()：http://api.jquery.com/closest/

DialogBox

javascript - Void JS单击“灯箱”的弹出区域