关闭模式点击身体 [英] close modal on click on body

问题描述

我只需要点击一下模式即可关闭它。我尝试了两种方法：

1. 针对 body 上的点击事件和检查模态是否有类，如果它显示它




2. 检查 event.target 和如果它不是模态隐藏它

两次尝试如下：

点击（函数（e）{$（$（＃过滤器按钮））。 .dialog）。toggleClass（show）;}）; $（body）。click（function（）{if（$（。dialog）。hasClass（show））{$（ .dialog）。removeClass（show）;}}）;}）;

  .dialog {display：none;宽度：300px; height：300px;        code>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< button id =过滤按钮> SHOW / HIDE< / button>< div class =dialog>< / div>  

点击显示/隐藏模式（红色框）不会打开。我认为这可能与＃filter-button 被算作目标有关吗？作为上述示例的故障排除计划，我试图使用 e.currentTarget https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget 基本上将上面的内容改为：

  $（函数（e）{
 console.log（e.currentTarget）; 
 ... 
  

我没有在控制台中找到任何东西，所以我不知道这是否是问题。

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

为什么会这样？

我的下一次尝试是：

  $（function（e）{$（＃filter-button）。click（function（e）{$（。dialog）。toggleClass（ show）;}）; if（e.currentTar get！= $（＃filter-button））{$（。dialog）。removeClass（show）; }}）;  

.dialog {display：none;宽度：300px; height：300px; code>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< button id =过滤按钮> SHOW / HIDE< / button>< div class =dialog>< / div>

切换功能已恢复，但单击模式不会关闭它。我发现：检查事件目标是否超链接，所以我将我的代码更改为：

  $（function（e）{
 
 $（＃filter-button）。click （函数（e）{
 $（。dialog）。toggleClass（show）; 
}）; 
 
 if（e.target.tagName.toLowerCase ）==='body'）{
 $（。dialog）。removeClass（show）; 
} 
 
}）; 
  

这会再次破坏我以前的代码，现在我的对话根本无法打开。

1. howcome我不能控制日志e.target吗？


2. 为什么模式根本不能打开第一个例子？是否因为以某种方式定位 body 出现逻辑错误？


3. 哪种方法更好？ e.target或将点击事件附加到body？

解决方案

将您的模态对话包装在视口的全宽和高度的容器中。这样，您可以显示或隐藏父容器，如果它被点击，而不是显示和隐藏对话。

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

$（function（e）{var modal = $（。modal点击（function（e）{modal.toggleClass（show）;}）; $（window）.click（function（e）{if（e.target） == modal [0]）{modal.removeClass（show）;}}）;}）;

  .modal-wrapper {display：none;宽度：100vw;身高：100vh;位置：绝对; 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-按钮> SHOW / HIDE< /按钮>< div class =modal-wrapper> < div class =modal>< / div>< / div>

I just need to have a modal close on click off of it. I tried 2 approaches:

1. Targeting a click event on body and check if the modal has a class and if it does show it

2. check the event.target and if it's not the modal hide it

Two attempts are below:

$(function(e) {

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

  $("body").click(function() {
    if ($(".dialog").hasClass("show")) {
      $(".dialog").removeClass("show");
    }
  });

});

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

.show {
  display: block !important;
}

<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>

Upon click on "SHOW/HIDE" the modal (a red box) does not even open. I think this might have something to do with #filter-button being counted as a target? As a troubleshooting initiative for the above sample, I attempted to use e.currentTarget https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget so basically changing the above to:

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

I got nothing in the console so I can't tell if that's the issue.

I also tried to log e.target and got no results in the console as well.

Why is that?

My next attempt:

$(function(e) {

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

});

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

.show {
  display: block !important;
}

<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>

The toggle function is restored, but clicking off of the modal does not close it. I found: Check if event target is hyperlink so I changed my code to:

$(function(e) {

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

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

});

This breaks my previous code again, and now my dialog doesn't open at all.

1. howcome I can't console log e.target?
2. Why is the modal not opening at all in the first example? Is it because of a logic error with targeting body somehow?
3. Which is the better way? e.target or attaching a click event to the body?

解决方案

To simplify things you could wrap your modal dialogue within a container that is full width and height of the viewport. This way you can show or hide the parent container if it is clicked instead of showing and hiding just the dialogue.

This also allows you to add an overlay with css later on to increase the visibility of the modal.

$(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>

这篇关于关闭模式点击身体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！