Question

我创建了两个模态弹出窗体...其中一个窗体是登录，另一个是注册。

任何时候只能打开一个表单，如果用户点击表单外的任何位置，我会尝试关闭它们。我可以让其中一个接近，但不能接近另一个。

我已经显示了与之链接的代码。请点击以下链接。链接确实有一些错误，但你应该明白这个想法。其中一个表单ID是＆＃39; id01＆＃39;其他人是＆＃39; id02＆＃39;有没有人有任何想法？

一旦在链接上，请选择如果您有帐户请点击这里或如果您还没有帐户，请点击此处查看表格

它链接的代码是

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>

由于

Answer 1

您应该制作一个覆盖整个页面的透明模态背景。在那个地方的顶部显示您的表格。然后，您只需将单击处理程序添加到模态背景中。

Answer 2

尝试使用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
    })

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

2 个答案: