2016-08-05 8 views
0

私はモーダルウィンドウを作っています。 Xボタンをクリックすると閉じます。 しかし、今度は、ユーザーがモーダルエリア外をクリックすると閉じます。ここで外部のクリックで自分のモーダルを閉じる方法は?

$("a[href='#modal']").click(function(e) { 
     e.preventDefault(); 
     $("body").addClass("noscroll"); 
     $(".modal").addClass("is-active"); 
     $(".modal_overlay").addClass("is-active"); 
    }); 
    $(".modal .close").click(function(e) { 
     e.preventDefault(); 
     if($(".modal").hasClass("is-active")) { 
      $("body").removeClass("noscroll"); 
      $(".modal").removeClass("is-active"); 
      $(".modal_overlay").removeClass("is-active"); 
     } 
    }); 

答えて

0

は、ソリューションです:

function close(){ 
    $("body").addClass("noscroll"); 
    $(".modal").addClass("is-active"); 
    $(".modal_overlay").addClass("is-active"); 
} 
$("a[href='#modal']").click(function(e) { 
    e.preventDefault(); 
    close(); 
}); 
$(".modal .close").click(function(e) { 
    e.preventDefault(); 
    if($(".modal").hasClass("is-active")) { 
     close(); 
    } 
}); 
$(window).click(function(e) { 
     close(); 
     return false; 
}); 
$(".modal").click(function(){ 
    return false; // prevents a click in dialog to close the modal 
}); 

前回のイベントハンドラを打つからそれらを防ぐために、モーダルでそれらを傍受しながら、それはちょうど、モーダルを閉じるには、ウィンドウ上でクリックを処理します。

関連する問題