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-effect这样的东西：点击整个身体的任何地方淡出。

感谢您的帮助。

Answer 1

尝试（准备好文件时）

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

然后获取文档的所有点击，检查inoverlay变量，如果它为false则隐藏覆盖，否则什么也不做。如果您有一个首先打开叠加层的按钮，请务必检查当您截取文档点击时不是那个被点击的按钮。

$(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()，您可以向叠加层添加一个返回false的事件处理程序（以防止事件冒泡），或者放置覆盖保留其余内容的div之外的覆盖（由于覆盖有absolute定位，因此有效。）

I updated your fiddle to show the second method.

通过单击正文上的任意位置关闭Div叠加

2 个答案: