点击远离它关闭模式弹出

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>