悬停时关闭模式窗口,关闭焦点时关闭
问题描述:
我正在使用fancybox作为我的模态窗口。我能够触发模式窗口在悬停时打开,但我也希望当链接没有被悬停时(焦点不准),它会关闭窗口。悬停时关闭模式窗口,关闭焦点时关闭
$("a.mini-view").fancybox().hover(function() {
$(this).click();
});
任何帮助表示赞赏。
我添加了鼠标移开,我在JS不好,所以重构以下将是有益的:
$(document).ready(function() {
$('a.mini-view').mouseout(function() {
$.fancybox.close();
});
$("a.mini-view").fancybox().hover(function() {
$(this).click();
});
$("a.mini-view").fancybox({
'overlayShow' : false,
'autoScale' : true
});
});
如果我直接从一个链接到另一个去,而两者之间的暂停,这不是”将不起作用
答
使用.hover()
或输入/输出jQuery方法其他鼠标触发事件的主要问题是所谓的bubbling
。
针对您的特定问题,您最好的选择是使用jQuery插件hoverIntent。如果你访问他们的网站,他们就处理泡沫事件的意思是一个很好的例子。
您加载的hoverIntent js文件后,就可以创建两个功能打开/关闭的fancybox将由hoverIntent
被称为回调:
function openFancybox(){
$(this).trigger("click");
}
function closeFancybox(){
$.fancybox.close();
}
....然后你hoverIntent
自定义脚本:
$(".mini-view").hoverIntent({
sensitivity: 7,
interval:500,
timeout:0,
over: openFancybox,
out: closeFancybox
}); // hoverIntent
(见文档,以微调您的设置)
......最后,你fancybox
自定义脚本只是看起来像:
$(".mini-view").fancybox({
'overlayShow' : false,
'autoScale' : true
}); // fancybox
SEE WORKING DEMO和随意浏览源代码。
旁注:
-
要简化你的代码,你实际上可以在一个单一的步骤既适用的插件相同的选择:
$(".mini-view") .fancybox({ 'overlayShow' : false, 'autoScale' : true }) .hoverIntent({ sensitivity: 7, interval:500, timeout:0, over: openFancybox, out: closeFancybox });
因为你使用的选项你的代码,我假设你使用的是fancybox v1.3.4。
UPDATE [2015年3月]:
DEMO使用的fancybox(v2.1.5)和hoverIntent(v1.8.0)
答
相信你只需要做:
$('a.mini-view').blur(function() {
// close the fancybox
});
'mouseout'事件的最新版本是另一种选择。 '$ .fancybox.close()'关闭。 – Detect 2012-07-30 18:21:42