html - 通过单击主体上的任意位置关闭 Div 覆盖

Question

这就是我所做的：

$('#keks-overlay').hide();  

$('#click').click(function(){
    $('#keks-overlay').toggle(450);
});

$('#close-overlay').click(function(){
    $('#keks-overlay').toggle(250);
});

​ jsFiddle：http: //jsfiddle.net/rHKkD/22/

这工作正常，但它仅通过单击“X”（#close-overlay）显示/隐藏（切换）。

我想做一些类似fancybox效果的事情：点击整个身体的任何地方都会淡出。

谢谢你的帮助。

Answer 1

尝试（当文件准备好时）

var inoverlay = false;
$('#keks-overlay').hover(function() {
    inoverlay = true;
}, function() {
    inoverlay = false;
});

然后获取文档上的所有点击，检查 inoverlay 变量，如果它是假的，隐藏你的覆盖，否则什么都不做。如果您有一个首先打开覆盖的按钮，请务必检查当您拦截对文档的点击时，它不是被点击的按钮。

$(document).click(function(e){
    if(inoverlay && (e.target.attr('id') != buttonForOverlay.attr('id') )) {
        closeOverlay();
    }
});

Answer 2

您可以将事件处理程序添加到div包含整个页面（或文档本身）的事件处理程序，以及hide()该处理程序中的覆盖。

$("#somebody").click(function() {
    $('#keks-overlay').hide(250);
});

但是，如果您想阻止对覆盖层本身的hide()点击div触发您的内容（之所以有效，是因为叠加层具有absolute定位）。

我更新了您的小提琴以显示第二种方法。