3

ユーザーにモーダル/ライトボックスを表示しています。ユーザーがボタンをクリックすると、モーダルが表示され、ページの残りの部分が暗くなります。いつものもの。

しかし、私はこれをしたいです。ユーザーがモーダルの外側の要素をクリックすると、モーダルが消えてページが通常に戻ります。

これはどのように行うことができますか？本文に onclick イベントを設定して、イベント ターゲットがモーダルかどうかを確認できることはわかっていますが、ユーザーがモーダル内のリンク/テキスト ボックス/ボタンをクリックするとどうなりますか? その場合、ターゲットはモーダルになりません。どうすればこれを解決できますか?

イベント ターゲットが に含まれているかどうかを確認する方法はありますか。含まれて<div id="modal"></div>いる場合はモーダルを閉じません。そうでない場合は、ユーザーがモーダルの外側をクリックしたことを意味し、それを閉じることができますか?

4

4 に答える 4

3

jsBin デモ

$(document).mouseup(function(e){
   if(e.target.id !== 'modal' ){
     $('#modal').hide();
   }
});

$('#modal').mouseup(function(e){
  e.stopPropagation();  // prevent mouseup propagate to underneath layers
});
于 2013-01-12T07:02:05.360 に答える
1

スペース全体を埋めるモーダルの下に div を配置し、それにクリック ハンドラーをアタッチすることができます。

于 2013-01-12T07:01:59.577 に答える
1 
$("body").click(function(e){
    if( ! $(e.target).closest("#modal").length ){
        $('#modal').hide();
    }
});

デモ

于 2013-01-12T07:10:40.947 に答える
1

別のアプローチ：

var mouseOverModal = false;

$(document).click(function(e){
   if ( ! mouseOverModal ){
       // close modal
   }
});

$('#modal').bind("mouseenter mouseleave", function(e){
     mouseOverModal = ( "mouseenter" == e.type );
})

$('#open-modal-handler').click(function(){  
    // open modal  
    return false; // <- IMPORTANT
})
于 2013-01-13T06:58:56.333 に答える