2

我正在使用 fancybox 作为我的模态窗口。我能够触发模式窗口在悬停时打开，但我也希望它在链接没有悬停时关闭窗口（失焦？）。

$("a.mini-view").fancybox().hover(function() {
  $(this).click();
});

任何帮助表示赞赏。

我添加了mouseout，我不擅长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
  });

});

如果我从一个链接直接转到另一个链接，而不在两者之间暂停，它就行不通

4

2 回答 2

2

The main problem with triggering events using .hover() or other mouse in/out jQuery methods is called bubbling.

For your particular issue, your best bet is using the jQuery plugin hoverIntent. If you visit their website, they have a good example about what dealing with bubbled events mean.

After you loaded the hoverIntent js file, you can create two functions to open/close fancybox that will be called by hoverIntent as callbacks :

function openFancybox(){
 $(this).trigger("click");
}
function closeFancybox(){
 $.fancybox.close();
}

.... then your hoverIntent custom script :

$(".mini-view").hoverIntent({
 sensitivity: 7,
 interval:500,
 timeout:0,
 over: openFancybox,
 out: closeFancybox 
}); // hoverIntent

(see documentation to fine-tune your settings)

...last, your fancybox custom script will simply look like:

$(".mini-view").fancybox({
 'overlayShow' : false,
 'autoScale'   : true
}); // fancybox

SEE WORKING DEMO and feel free to explore the source code.

SIDE NOTES:

  • To simplify your code, you could actually apply both plugins in a single step to the same selector :

     $(".mini-view")
 .fancybox({
  'overlayShow' : false,
  'autoScale'   : true
 })
 .hoverIntent({
  sensitivity: 7,
  interval:500,
  timeout:0,
  over: openFancybox,
  out: closeFancybox 
 });

  • Because the options you used in your code, I assumed you were using fancybox v1.3.4.

UPDATE [March 2015] :

DEMO using the latest versions of Fancybox (v2.1.5) and hoverIntent (v1.8.0)

于 2012-07-30T23:34:19.443 回答
1

相信你只需要这样做：

$('a.mini-view').blur(function () {
    // close the fancybox
});
于 2012-07-30T18:19:42.117 回答