4

モーダルを行う古典的な方法は、コンテンツを含む div (ダイアログ) と z-index が低い (オーバーレイ) を含む div です。次に、クリック イベントをオーバーレイにバインドし、コンテンツ ダイアログを非表示にします。

<div class="dialog">...</div>
<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9)">

しかし、Pinterest と Facebook がそれを 1 つの div にまとめていることに気付きました。

<div class="overlay" style="background-color:rgba(255, 255, 255, 0.9);position: fixed; z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;">
      <div class="dialog" style="position: static;"></div>
</div>

しかし、このアプローチでは、ダイアログを持たないオーバーレイでのみクリックイベントをバインドしてダイアログを閉じるにはどうすればよいですか?

http://jsfiddle.net/mCupS/9/

4

2 に答える 2

11

このようなことをすることによって：

$('.modal').click(function(){
     $('.modal, .inner').hide(); 
});                                    
$('.inner').click(function(e){
   e.stopPropagation();
});              
​

http://jsfiddle.net/mCupS/10/

event.stopPropagation(): イベントが DOM ツリーをバブリングしないようにして、親ハンドラーにイベントが通知されないようにします。

于 2012-04-28T06:15:48.683 に答える
2

stopPropagation親コントロールへのイベントの伝播を停止し、モデルのクリック イベントを取得しません。

$('.modal ').click(function(){
    alert("a");
});

$('.inner').click(function(e){
    alert("b");
    e.stopPropagation();
});

Edit、上記を達成するためのより良い方法。

The Dangers of Stopping Event Propagation で説明されているように、上記の提案された解決策よりもコメントで指摘されているより良い方法がある可能性があります。このようにして、内側のアイテムをクリックして非表示にしないようにすることができます。

ライブデモ

$(document).on('click', function(event) {
  if (!$(event.target).closest('.inner').length) {
    $('.modal .inner').hide();
  }
});
于 2012-04-28T06:17:20.490 に答える