Question

当我在用户点击＆＃34;登录＆＃34;时，我正在使用覆盖物显示在所有内容的前面。叠加层由一个不透明的包装器组成，它包含一个固定的内部div，其中包含登录表单。

这是html：

<div class="login_wrapper"> 
    <div class="login_info">
        <div class="login_form">
             // form 
        </div>
    </div>
</div>

和css：

.login_wrapper{
    position:absolute; 
    position: fixed;
    margin: auto;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%; 
    height:100%; 
    background-color:rgba(0, 0, 0, 0.5);
    z-index:9998;
    display: none;
}
.login_info{
    font-family: "NimbusCondensed";
    position:absolute; 
    margin: auto;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 350px; 
    height:300px; 
    background: #cacaca; 
    border: solid #000000 1px;
    border-radius: 10px;
    z-index:99999;
    pointer-events: none;
}
.login_form{
    margin-top: 40px;
    margin-left: 12.5%;
    padding: 10 20 0 20;
    width: 220px;
    border: 1px solid black;
    border-radius: 7px;
    background: white;
    box-shadow: 0px 5px 13px black;
    z-index: 100000;
}

当用户点击login_info之外的任何地方时，我希望隐藏此叠加层。

我有以下JQuery处理这个：

$(document).ready(function(){
    $(".login_wrapper").click(function(){ 
        $(".login_wrapper").fadeToggle(300);  
    });
});

但是如果用户点击覆盖图上的ANYWHERE，则会隐藏 login_wrapper ，包括中间的表单会阻止表单输入任何信息。

不知何故，点击事件正在通过＆＃34; login_form ＆amp; login_info ，点击 login_wrapper 等浏览器做出反应。

如何解决此问题，以便仅在内部div之外单击叠加层时才应用jQuery代码。

谢谢！

Answer 1

将您的代码更改为：

$(document).ready(function(){
    $(".login_wrapper").click(function(){ 
        $(".login_wrapper").fadeToggle(300);  
    });
    $(".login_info").click(function(event){
        event.stopPropagation();
    });
});

这将阻止点击事件冒泡到.login_wrapper。有关stopPropagation()的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation。

Answer 2

首先，您必须在.login_wrapper中转换#login_wrapper，然后添加：

$('#login_wrapper').click(function(e) {
    if (e.target.id === "login_wrapper")
    $('#login_wrapper').fadeToggle(300);
});

这将仅定位标识为login_wrapper的元素。希望这有帮助

可以通过前面的元素单击叠加

2 个答案: