当用户单击文档中的任何位置时淡出弹出窗口

Question

我需要的是当弹出窗口出现并且用户点击文档中除弹出窗口之外的任何位置时，弹出窗口应该淡出。

我已尝试使用target.attr方法，但在Mozilla中失败。

有什么想法吗？在此先感谢

Answer 1

您可以使用jQuery fadeout方法和one方法。

类似的东西：

jQuery("#yourpoup").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#yourpoup").fadeOut(); });

根据this问题，使用它比使用bind更好。

Answer 2

还有一个用于外部点击的JQuery插件，这样即使弹出一切也可以处理点击。

http://benalman.com/projects/jquery-outside-events-plugin/

$("#yourpopup").bind( "clickoutside", function(event){
$(this).fadeOut(500);
});

Answer 3

如果你的弹出窗口是JQuery对话框，你可以看到这个帖子：

jQuery UI - Close Dialog When Clicked Outside

Answer 4

使用jquery作为示例，假定$popup是您的弹出元素

$('body').click(function(){
    // hide the popup here
});

$popup.click(function(e) {
    // do something here if needed
    e.stopPropagation();
});

关键是当点击弹出窗口时，停止将事件冒泡到正文，因此不会触发附加到正文的函数。