通过单击远离它来关闭模式弹出窗口答案

【问题标题】：Closing Modal Popup by Clicking Away from It通过单击远离它来关闭模式弹出窗口
【发布时间】：2012-05-03 21:47:30
【问题描述】：

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

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

一位用户告诉我像这样<div id="overlay" onclick='overlay()'> 将onclick='overlay()' 添加到覆盖div 中

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

【问题讨论】：

【解决方案1】：

试试这个：

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

【讨论】：

嗨，对不起，我添加了，当我试图关闭它时它什么也没做，我不知道我做错了什么，谢谢你的帮助
您的模态内容 div 是否在 overlay div 内？如果是这样，它应该可以工作。
我稍微编辑了一下，用你的原始代码和我的ready()函数再试一次。
也许如果您发布一些代码，例如您的 HTML 和 JS，我们可能能够更好地帮助您。如果您的代码没有受到任何干扰，Musa 和我的解决方案都应该可以工作。
好的，对不起，这是我整个页面的代码，唯一的其他代码是一个外部文件，其中包含用于覆盖的 javascript，但它与教程中的完全相同已发布在此页面上，所以我没有更改任何内容。 - pastebin.com/5EZFD3CM

【解决方案2】：

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

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

【讨论】：

嗨，我现在刚刚尝试过，并将所有代码从覆盖层下面移到它下面，但出现的只是半透明覆盖层，没有实际的模态代码本身。
如果将内部 div 移到 overlay div 之外，#overlay div CSS 将不起作用。将#overlay div 重命名为#modalWindow。您还必须更改 js 函数以隐藏 modalWindow。
嗨，我已经更改了名称，还尝试更改 javascript 以关闭它，但它仍然没有显示，我得到的只是覆盖显示而不是实际的 modal_wrapper内容，有什么想法吗？感谢您的帮助
您在问题中包含了 JQuery 标记，所以我假设您的页面包含 Jquery 库对吗？如果是这样，我可能会尝试找到一个无需编辑所有代码的更简单的解决方案。
嗨，是的，它确实包含了 jquery 库，因为我还有其他使用它的元素。