Question

我只需要关闭它就可以关闭模态。我尝试了两种方法：

在body上定位点击事件，并检查模态是否有类以及是否显示
检查event.target，如果不是模态隐藏

以下两次尝试：

＆＃13;

$(function(e) {

  $("#filter-button").click(function(e) {
    $(".dialog").toggleClass("show");
  });

  $("body").click(function() {
    if ($(".dialog").hasClass("show")) {
      $(".dialog").removeClass("show");
    }
  });

});

＆＃13;

.dialog {
  display: none;
  width: 300px;
  height: 300px;
  background-color: red;
}

.show {
  display: block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>

<div class="dialog"></div>

＆＃13;

点击＆＃34; SHOW / HIDE＆＃34;模态（红色框）甚至没有打开。我认为这可能与#filter-button被视为目标有关？作为上述示例的问题排查举措，我尝试使用e.currentTarget https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget，因此基本上将上述内容更改为：

$(function(e) {
  console.log(e.currentTarget);
  ...

我在控制台里什么都没有，所以我无法判断这是不是问题。

我也尝试记录e.target并且在控制台中也没有结果。

为什么？

我的下一次尝试：

＆＃13;

$(function(e) {

  $("#filter-button").click(function(e) {
    $(".dialog").toggleClass("show");
  });
  
  if(e.currentTarget != $("#filter-button")) {
  	$(".dialog").removeClass("show");
  }

});

＆＃13;

.dialog {
  display: none;
  width: 300px;
  height: 300px;
  background-color: red;
}

.show {
  display: block !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="filter-button">SHOW/HIDE</button>

<div class="dialog"></div>

＆＃13;

切换功能已恢复，但单击模式不会关闭它。我发现：Check if event target is hyperlink所以我将代码更改为：

$(function(e) {

  $("#filter-button").click(function(e) {
    $(".dialog").toggleClass("show");
  });

  if(e.target.tagName.toLowerCase() === 'body') {
    $(".dialog").removeClass("show");
  }

});

这再次破坏了我之前的代码，现在我的对话框根本没有打开。

我怎么能控制登录e.target？
为什么第一个例子中的模态根本没有打开？这是因为以某种方式定位body的逻辑错误吗？
哪种方式更好？ e.target或附加点击事件到身体？

Answer 1

为了简化操作，您可以将模式对话包装在视口的全宽和高度的容器中。这样，如果单击父容器，则可以显示或隐藏父容器，而不是仅显示和隐藏对话框。

这也允许您稍后添加带有css的叠加层以增加模态的可见性。

$(function(e) {

  var modal = $(".modal-wrapper")
  $("#filter-button").click(function(e) {
    modal.toggleClass("show");
  });
  $(window).click(function(e) {
    if (e.target == modal[0]) {
      modal.removeClass("show");
    }
  });
});

.modal-wrapper {
  display: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

.modal {
  width: 300px;
  height: 300px;
  background-color: red;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="filter-button">SHOW/HIDE</button>
<div class="modal-wrapper">
  <div class="modal"></div>
</div>

点击身体

1 个答案: