单击外部关闭div

I want to hide a div by clicking on the close link in it, or by clicking anywhere outside that div.

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

I am trying following code, it opens and close the div by clicking close link properly, but if I have problem to close it by clicking anywhere outside the 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>

Demo: http://jsfiddle.net/LxauG/

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

7 个解决方案

#1

An other way which makes then your jsfiddle less buggy (needed double click on open).

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

This doesn't use any delegated event to body level

这不会将任何委托事件用于身体级别

Set tabindex="-1" to DIV .popup ( and for style CSS outline:0 )

将tabindex =“ - 1”设置为DIV .popup（对于样式CSS outline：0）

DEMO

$(".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);
});

#2

You need

你需要

$('body').click(function(e) {
    if (!$(e.target).closest('.popup').length){
        $(".popup").hide();
    }
});

#3

I'd suggest using the stopPropagation() method as shown in the modified fiddle:

我建议使用stopPropagation（）方法，如修改过的小提琴中所示：

Fiddle

小提琴

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

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

That way you can hide the popup when you click on the body, without having to add an extra if, and when you click on the popup, the event doesn't bubble up to the body by going through the popup.

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

#4

You'd better go with something like this. Just give an id to the div which you want to hide and make a function like this. call this function by adding onclick event on body.

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

function myFunction(event) { 

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

#5

Add a transparent background taking up the whole window size, just before your popup div

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

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

Then on its click, dismiss the popup.

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

$(".transparent-back").on('click',function(){
    $('popup').fadeOut(300);
});

#6

This question might have been answered here. There might be some potential issues when event propagation is interrupted, as explained by Philip Walton in this post.

这个问题可能已在这里得到解答。当事件传播中断时，可能存在一些潜在的问题，正如Philip Walton在这篇文章中所解释的那样。

A better approach/solution would be to create a custom jQuery event, e.g. clickoutside. Ben Alman has a great post (here) that explains how to implement one (and also explains how special events work), and he's got a nice implementation of it (here).

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

More reading on jQuery events API and jQuery special events:

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

Introduction to custom events
自定义事件简介
jQuery event extensions
jQuery事件扩展

#7

-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);
                    }
        });
    });
 });

#1