javascript - スタッキングエラーの背後にある要素を持つ要素のjQuery .click?

Question

次のような2つのdivを単純に表示する「ライトボックス」のような機能があります。

緑色 (機能すると色が付きません) は、ログイン ボックスを閉じるためにクリックする領域です。

jsFiddle コード付き: http://jsfiddle.net/bhcGv/8/

ログイン ボックスをクリックすると、緑色のボックスをクリックしたと見なされるため、ログイン ボックスは消えます。助言がありますか？

Answer 1

.stopPropagation メソッドが必要です。

ここで更新された jsfiddle: http://jsfiddle.net/bhcGv/10/

Answer 2

このコードを追加できます

.find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });

だからあなたの document.ready 関数は

$(document).ready(function(){
    $("#loginOffBox").click(function(){
        $('#loginOffBox').hide();
          $('#centeredBox').hide();
    }).find('#centeredBox').click(function(e){
        e.preventDefault();
        e.stopPropagation();
return false;
    });
    // other js
});

これにより、中央の div をクリックしたときにイベントが実行されなくなります。

色付きの div から中央の div を取り出すこともできます。その後、イベントのバブルは発生しません。

Answer 3

2 つの div の z-index を修正します。バックグラウンド div はポップアップ div よりも小さい z-index を持つ必要があり、両方とも比較的高い値を持つ必要があります。

loginOffBox の z-index を 1000 に、centeredBox の z-index を 1100 にすると、正常に動作するはずです。