1

ダイアログボックスと薄暗い背景でポップアップする超シンプルな「ライトボックス」を作成しています。

私の問題は、ユーザーが淡色表示された背景をクリックしたときにオーバーレイを非表示にしたいのですが、ダイアログボックス領域をクリックした場合ではありません。

これまでの私のアプローチは次のとおりです。

「display:none;」のクラスを追加しました。ラッパーに追加して、クリックすると消えます。もちろん、#dialogBox をクリックすると、オーバーレイも消えます。dialogBox 領域で false のクリックを返すように指示する方法はありますか? または、これにアプローチするより良い方法はありますか?

<div id="overlay" onclick="$(this).addClass('displayNone');">
    <div id="dialogBox">
        <p>Lorem ipsum</p>
</div>
</div><!-- /#overlay -->

ありがとうございました！

4

2 に答える 2

1

これにより、クリック イベントが、ライトボックスを閉じる要素を処理するまでバブリングするのを防ぐ必要があります。

$('#dialogBox').click(function(e) {
    e.stopPropagation();
})
于 2013-07-19T14:54:51.597 に答える