Javascript 如何通过单击屏幕上的任意位置关闭模式弹出窗体

我已经创建了两个模式弹出表单…一个是登录表单，另一个是注册表单

一次只能打开一个表单，如果用户单击表单之外的任何位置，我会尝试将其关闭。我可以让其中一个靠近，但另一个不行

我已经显示了它链接到的代码。请点击下面的链接。链接确实有一些错误，但你应该明白。 其中一个表单id是'id01'，另一个是'id02'，有人有什么想法吗

一旦进入链接，请选择您是否拥有帐户，请单击此处或 如果您没有帐户，请单击此处查看表格

它链接到的代码是

var modal = document.getElementById('id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        document.getElementById('id02').style.display = "none";   

    }
}
</script>

var modal=document.getElementById（'id02'）；
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
document.getElementById（'id02'）.style.display=“无”；
}
}

---

谢谢

您应该制作一个覆盖整个页面的透明模式背景。在该位置的顶部显示您的表单。然后，您可以简单地将单击处理程序添加到模式背景中。

尝试使用jquery

$('.click-btn').click(function(){
       $('.modal').show(); //show popup
    })

    $('body').click(function(){
       $('.modal').hide(); //hide modal
    })

    $('.click-btn, .modal').click(function(e){
       e.stopPropagation; // don't close modal by clicking inside modal and by clicking btn
    })

---

您正在使用引导程序吗？请单击此处的

，并创建一个-如果您使用的是jQuery，请确保包含jQuery。如果你真的使用它，这里有数百个例子和10个副本SO@mplungjan这就是我举的例子。请点击链接@UpendraJoshi No，我没有使用bootstrapI did。我在标题中看到了jQuery。HTML无效，您有许多正文标记。我该怎么做？将模态和表单放在一个包装分区中。使模态位置：固定，宽度：100%，高度：100%，顶部：0，左侧：0，不透明度：0,5，zIndex:999，以便覆盖整个页面。然后制作zIndex:1000或类似的表格。将处理程序添加到模式onclick，而不是window.onlick。谢谢，我们将试一试