jQuery : モーダルウィンドウの外をクリックしたときだけウィンドウを閉じさせたい

モーダルウィンドウを開くとウィンドウの外側が暗くなるってよくある演出。その外側の暗くなった箇所をクリックしたときだけウィンドウを閉じる。

webサイトでモーダルウィンドウの外をクリックしたらウィンドウが閉じる、ってのがどの程度の浸透度かわからないけど、言われてみればネットをみてるときとか無意識でやってるかも。

ウィンドウが閉じた状態=非表示ってケースとして。

<div class="filter-container">//モーダルウィンドウの周りの暗くなる部分
   <div class="modal-container">//モーダルウィンドウ本体
        <p>モーダルウィンドウ本体</p>
   </div>
</div>

<div class="filter-container">//モーダルウィンドウの周りの暗くなる部分

<div class="modal-container">//モーダルウィンドウ本体

<p>モーダルウィンドウ本体</p>

</div>

.filter-containerをクリックしたらウィンドウを閉じるという処理にしたらウィンドウ本体をクリックしたときも閉じるようになってしまった。当然だ。

.targetを使う。

$('.filter-container').click(function(event){
    var clickedElement = $(event.target);
    if($(clickedElement).hasClass('filter-container')){
        $('.filter-container').fadeOut(500);
    }
});

$('.filter-container').click(function(event){

var clickedElement = $(event.target);

if($(clickedElement).hasClass('filter-container')){

$('.filter-container').fadeOut(500);

}

});

.targetでクリックされた要素を取得して、その要素が外側の要素だったらウィンドウを閉じる(非表示にする)。もっとスマートにできるかもしれないが。

2015年1月25日追記
コードが間違っていたので修正しました。
あと、親子要素になっているならevent.stopPropagation()メソッドを使ったほうがいいかもしれませんね。