Javascript 通过单击关闭模式弹出窗口

我使用本教程添加模式屏幕：

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

一位用户告诉我向overlay div添加

onclick='overlay（）'

，如下所示

---

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

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

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

您希望用户看到的内容放在此处

试试这个：

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

---

嗨，我刚试过，把所有的代码都从里面移到下面，但是所有出现的都是半透明的覆盖，没有实际的模式代码本身。

#overlay div

如果将内部div移到

覆盖

div之外，

#overlay div

CSS将不起作用。将

#overlay div

重命名为

#modalWindow

。您还必须更改js函数以隐藏modalWindow。您好，我已经更改了名称并尝试更改javascript以关闭它，但它仍然没有显示，我得到的只是覆盖显示，而不是包含所有内容的实际modal_包装，有什么想法吗？感谢您的帮助您在问题中包含了

JQuery

标记，所以我假设您的页面包含了JQuery库，对吗？如果是这样，我可能会尝试找到一个更简单的解决方案，不必编辑所有代码。您好，是的，它包含了jquery库，因为我有其他使用它的元素。您可以检查单击是否源自覆盖，然后调用

overlay（）

ok，但我如何检查单击来自何处，我对javascript不是很在行。您好，很抱歉，当我试图关闭它时，我添加了内容，但它没有做任何操作，我不确定我做错了什么，感谢您的帮助，因为您的模态的内容div在

覆盖中吗？如果是这样的话，它应该可以工作。我稍微编辑了一下，然后用您的原始代码和我的
ready（）
函数再试一次。也许如果您发布一些代码，比如HTML和JS，我们可以更好地帮助您。如果没有任何东西干扰您的代码，那么Musa和我的解决方案都应该可以工作。好的，对不起，这是我整个页面的代码，唯一的其他代码是一个外部文件，其中包含覆盖的javascript，但它与教程中的内容和此页面上发布的内容完全相同，因此我没有更改任何内容-