javascript - 通过在模态外部单击来关闭模态

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