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

通过单击模态外部关闭模态

1 个答案: