モーダルの外側をクリックしてモーダルを閉じる

Question

私はCSSでモーダルウィンドウを構築しています。モーダルは、その外側をクリックすることで閉じることができます。

私の解決策は、イベントリスナーがページに別々に追加されたときにモーダルを閉じることです。しかし、彼らは一緒に働かない。両方のリスナーがページに追加されると、モーダルは開かれません。

どうすれば一緒に動作させることができますか？

HTML

<a href="#openModal" id="modal-window" class="event test"> 
    <div class="shorten-long-text test"> 
    </div> 
</a> 

<div id="openModal" class="modalDialog Dialog1"> 
    <div class="myModal"> 
    <div class="modal-header"> 
    </div> 
    <div class="modal-body row"> 
     <div class="col-xs-6" > 
     </div> 
    </div> 
    <div class="modal-footer uppercase color-main"> 
     <a href="#close" title="Close"></a> 
    </div> 
    </div> 
</div> 

JS

$(window).click(function(ev) { 
    if($(ev.target).attr('class') != ".Dialog1") { 
     $(".Dialog1").removeClass('isOpen'); 
     $(".Dialog1").addClass('isClosed'); 
    } 
}); 

$(".test").click(function() { 
    $(".Dialog1").removeClass('isClosed'); 
    $(".Dialog1").addClass('isOpen'); 
}); 

Answer 1

使用toggleClass() HTML：

<div id="openModal" class="modalDialog isClosed Dialog1"> 

JS：

$(window).click(function(ev) { 
if(!$(ev.target).is('.Dialog1,.test') $(".Dialog1").toggleClass('isClosed isOpen'); 
}          
}); 

$(".test").click(function() { 
$(".Dialog1").toggleClass('isClosed isOpen'); 
});