通過點擊模態外部來關閉模態

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'); 
});