点击远离它关闭模态弹出窗口

Question

我正在使用本教程添加模态屏幕：

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

除了关闭它之外，一切都很好。我不想通过按钮关闭它，而是通过单击模态外部，即在其后面的页面的其余部分的背景中，为用户提供关闭它的选项。

用户告诉我将onclick='overlay()'添加到覆盖div中，如<div id="overlay" onclick='overlay()'>

当我尝试通过单击外部来关闭模态时，它可以正常工作，但是如果你点击实际的模态本身也会关闭它，这是我不想要的，因为它是一个注册表单。那么有没有办法只通过点击实际模态本身的外部来关闭模态？

Answer 1

试试这个：

$(document).ready(function(){
$('#overlay').bind('click', function(event){
    if (event.target == $('#overlay').get(0))
        overlay(); 
});

Answer 2

您必须从模态窗口移动叠加层的代码。 将其分开，您不会将叠加层作为窗口的父级，并且点击事件将仅在叠加层上触发。

<div id="overlay"> </div>
<div id="modalWindow">
    <p>Content you want the user to see goes here.</p>
</div>