通过单击外部关闭 div

IT技术 javascript jquery html
2021-02-27 01:07:53

我想通过单击其中的关闭链接或单击该 div 之外的任何位置来隐藏div。

我正在尝试以下代码，它通过正确单击关闭链接来打开和关闭 div，但是如果我无法通过单击 div 外的任何位置来关闭它。

$(".link").click(function() {
  $(".popup").fadeIn(300);
}

);
$('.close').click(function() {
  $(".popup").fadeOut(300);
}

);
$('body').click(function() {
  if (!$(this.target).is('.popup')) {
    $(".popup").hide();
  }
}

);
<div class="box">
  <a href="#" class="link">Open</a>
  <div class="popup">
    Hello world
    <a class="close" href="#">Close</a>
  </div>
</div>

演示： http : //jsfiddle.net/LxauG/

6个回答

另一种使您的 jsfiddle 减少错误的方法（需要双击打开）。

这不使用任何委派事件到身体级别

设置tabindex="-1"为 DIV .popup（以及样式 CSS outline:0）

演示

$(".link").click(function(e){
    e.preventDefault();
    $(".popup").fadeIn(300,function(){$(this).focus();});
});

$('.close').click(function() {
   $(".popup").fadeOut(300);
});
$(".popup").on('blur',function(){
    $(this).fadeOut(300);
});
为了将来参考，请注意fadeOut这里是使其正常工作的关键。如果没有延迟淡入淡出，模糊事件会在弹出 div 内元素的任何事件之前触发。
2021-04-17 01:07:53
这是最好的答案。修复了马车点击和身体点击。我不明白为什么它这么有问题。我使用最稳定的 JQuery 版本 1.9.1 修复了代码，并将 JQuery 代码放在 document.ready 中，确保在 DOM 准备好之前不会发生任何事情。jsfiddle.net/LxauG/14
2021-04-26 01:07:53
如果您的弹出窗口包含静态内容，这是一个很好的解决方案，我的意思是说，如果您的弹出窗口包含表单输入或任何可以具有焦点属性的内容，那么 div 焦点将被模糊，并且您的按钮或输入将获得导致隐藏弹出窗口的焦点。
2021-05-03 01:07:53
@Parrotmaster 因为委托事件是在打开单击时触发的，所以也应该将 stopPropagation 与 OP 的原始代码一起使用
2021-05-08 01:07:53
非常感谢烤和@Parrotmaster，它解决了问题。
2021-05-11 01:07:53

你需要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});
谢谢，但是你能检查一下演示吗，它不会通过在弹出窗口之外点击来关闭弹出窗口。
2021-04-27 01:07:53
+1 仅在处理单击 DIV 内的包裹元素的情况时发布了答案
2021-05-09 01:07:53

我建议使用 stopPropagation() 方法，如修改后的小提琴所示：

小提琴

$('body').click(function() {
    $(".popup").hide();
});

$('.popup').click(function(e) {
    e.stopPropagation();
});

这样，您可以在单击正文时隐藏弹出窗口，而无需添加额外的 if，并且当您单击弹出窗口时，事件不会通过弹出窗口冒泡到正文。

这工作正常，但是如果我有多个弹出窗口并且我在单击正文时将它们隐藏，它们都将停止并且我需要在 e.stopPropagation() 之后隐藏剩余的弹出窗口。有没有更好的解决办法。
2021-04-16 01:07:53
是的，但原来的小提琴也是如此，我只是担心事件传播的事情
2021-04-20 01:07:53
你的小提琴似乎很糟糕。在绿色块出现之前，我不得不多次点击打开链接，即使那样我也很难关闭它。
2021-04-22 01:07:53
@helpme 我不明白你在说什么，你能解释得更好一点，我可以帮你吗？
2021-04-22 01:07:53
@JonasGrumann 谢谢，是的，如果我添加最后一个函数，原来的就有这个问题。这就是为什么我发布这个问题的原因是我在单击它之外的任何地方后无法关闭 .popup。
2021-05-07 01:07:53

你最好用这样的东西。只需给要隐藏的 div 一个 id 并创建这样的函数。通过在主体上添加 onclick 事件来调用此函数。

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}

在弹出 div 之前添加一个占据整个窗口大小的透明背景

.transparent-back{
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
}

然后点击它，关闭弹出窗口。

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});
这最适用于模态窗口，但对于例如上下文菜单或滑动面板，您不希望取消 div 外的第一次单击，因为这不利于可用性。
2021-04-16 01:07:53
我使用颜色选择器 div 窗口作为弹出菜单，用户可以单击网格中的任何颜色，如果他们在网格外单击，弹出颜色选择器就会消失，这是一个非常酷的行为。
2021-05-01 01:07:53
其它你可能感兴趣的问题
上一篇在量角器中，browser.isElementPresent vs element.isPresent vs element.isElementPresent 下一篇tvOS 中的网络应用