div（モーダル）を閉じるにはどうすればいいですか？ PinterestとFacebookの方法

Question

モーダルを行う古典的な方法は、コンテンツ（ダイアログ）を持つdivとZ-インデックスを下位（オーバーレイ）のdivです 次に、オーバーレイにclickイベントをバインドしてdeコンテンツダイアログ。

<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/

Answer 1

：

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

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

event.stopPropagation()は：、DOMツリーをバブルアップイベントが通知されてから任意の親ハンドラを防止することからイベントを防ぎます。

Answer 2

stopPropagationは、親コントロールにイベントの伝播を停止し、あなたは、モデルのクリックイベントを取得することはありません。

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

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

編集、上記目的を達成するためのより良い方法。

The Dangers of Stopping Event Propagationで説明されているように、上記の解決策の上にコメントとして指摘されているより良い方法があるかもしれません。このようにして、内側の項目がクリックして非表示になっていないことを確認できます。

Live Demo

$(document).on('click', function(event) { 
    if (!$(event.target).closest('.inner').length) { 
    $('.modal .inner').hide(); 
    } 
});