Оверлей можно щелкнуть через элемент перед ним

Я использую наложение для входа, которое появляется перед всем, когда пользователь ударил «вход». Оверлей состоит из непрозрачной оболочки, содержащей сплошной внутренний-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); 
    }); 
});

Но login_wrapper скрыта, если использование щелкает ВЕЗДЕ на накладкой, включая форму в середине, которые предотвращают затем образуют ввода какой-либо информации.

Как-то клики получает "через" login_form & login_info и браузер реагирует как login_wrapper щелкает.

Как разрешить это, чтобы код jQuery применялся ТОЛЬКО, когда наложение нажимается за пределами внутренних div.

Спасибо!

источник

2015-02-22 gEne

Попробуйте использовать event.stoppropogation() в jQuery в событии click –

Ну, так как ваша форма входа и информация для входа находятся внутри вашей учетной записи, логично сказать, что когда вы нажимаете на форму входа, вы также нажимаете на обертка для входа, поэтому эффект. – Alin

хорошо пункт. Я понял, что форма накладывается перед оболочкой, событие click не будет распространяться «через нее». нет? – gEne

Измените код следующим образом:

$(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.

источник

2015-02-22 08:51:13 winhowes

Во-первых, вы должны преобразовать .login_wrapper в #login_wrapper, затем добавьте это:

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

Это будет предназначаться только элемент с идентификатором login_wrapper. Надеюсь, это поможет

источник

2015-02-22 08:53:55 Alin

Оверлей можно щелкнуть через элемент перед ним

ответ

Смежные вопросы