通过点击模式外部来关闭模式

我有一个用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');
});

---

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

链接地址: http://www.djcxy.com/p/83993.html

上一篇: Closing a modal by clicking outside of the modal

下一篇: Prevent Boostrap modal closing after LinkButton Click inside modal