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

Question

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

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

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

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

score 2 · Accepted Answer

试试这个：

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

score 0 · Accepted Answer

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

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

2 回答 2