单击外部关闭div

时间:2013-07-31 08:55:34

标签: javascript jquery html

我希望通过点击其中的关闭链接来隐藏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/

8 个答案:

答案 0 :(得分:34)

另一种使你的jsfiddle减少错误的方法(需要双击打开)。

这不会将任何委托事件用于正文级别

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

答案 1 :(得分:23)

你需要

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

答案 2 :(得分:6)

我建议使用stopPropagation()方法,如修改过的小提琴中所示:

Fiddle

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

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

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

答案 3 :(得分:1)

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

function myFunction(event) { 

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

答案 4 :(得分:1)

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

之前
.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);
});

答案 5 :(得分:0)

这个问题可能已经回答here。如事件传播中断可能存在一些潜在问题,正如Philip Walton在this post中所解释的那样。

更好的方法/解决方案是创建自定义jQuery事件,例如clickoutside。 Ben Alman有一篇很棒的帖子(here),解释了如何实现一个(并解释了特殊事件的工作方式),并且他有一个很好的实现(here)。

有关jQuery事件API和jQuery特殊事件的更多阅读:

答案 6 :(得分:0)

var modal = document.getElementById("reject-popup");    
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }

}

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