25

我想通过单击其中的关闭链接或单击该 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/

4

8 回答 8

36

另一种使你的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);
});
于 2013-07-31T09:08:18.427 回答
28

你需要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});
于 2013-07-31T08:57:33.440 回答
8

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

小提琴

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

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

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

于 2013-07-31T09:00:15.990 回答
1

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

function myFunction(event) { 

if(event.target.id!="target_id")
{ 
    document.getElementById("target_id").style.display="none";
  }
}
于 2015-03-06T04:19:43.723 回答
1

在弹出 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);
});
于 2015-12-17T12:00:02.677 回答
0

这个问题可能已经在这里回答了。正如 Philip Walton 在这篇文章中所解释的那样，当事件传播被中断时，可能会出现一些潜在的问题。

更好的方法/解决方案是创建自定义 jQuery 事件，例如 clickoutside。Ben Alman 有一篇很棒的文章（这里）解释了如何实现一个（并且还解释了特殊事件是如何工作的），并且他有一个很好的实现（这里）。

更多关于 jQuery 事件 API 和 jQuery 特殊事件的阅读：

于 2015-10-19T09:59:57.427 回答
0 
var modal = document.getElementById("reject-popup");    
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }

}
于 2021-03-13T05:26:57.373 回答
-1 
 //for closeing the popover when user click outside it will close all popover 
 var hidePopover = function(element) {
        var elementScope = angular.element($(element).siblings('.popover')).scope().$parent;
        elementScope.isOpen = false;
        elementScope.$apply();
        //Remove the popover element from the DOM
        $(element).siblings('.popover').remove();
    };
 $(document).ready(function(){
 $('body').on('click', function (e) {
       $("a").each(function () {
                    //Only do this for all popovers other than the current one that cause this event
           if (!($(this).is(e.target) || $(this).has(e.target).length > 0) 
                && $(this).siblings('.popover').length !== 0 && $(this).siblings('.popover').has(e.target).length === 0)                  
                    {
                         hidePopover(this);
                    }
        });
    });
 });
于 2017-10-03T04:38:50.733 回答