悬停时打开和关闭模式窗口，关闭焦点时关闭模式窗口 [英] open and close modal window on hover and close when out of focus

问题描述

我使用fancybox作为我的模式窗口。我能够触发模式窗口打开悬停，但我也希望它关闭窗口时，链接不被悬停（焦点​​不清）？

< pre $ $（a.mini-view）。fancybox（）。hover（function（）{
$（this）.click（）;
} ）;


任何帮助表示感谢。

I

  $（document）.ready（read-only）在文件中添加鼠标，我不擅长js，因此重构以下代码会很有帮助： 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方法称为冒泡。

对于您的特定问题，最好的办法是使用jQuery插件 hoverIntent 。如果你访问他们的网站，他们有一个很好的例子来说明处理冒泡事件的意思。

在你加载了 hoverIntent js文件后，你可以创建两个函数来打开/关闭将被 hoverIntent 调用的fancybox作为回调：

  function openFancybox（）{
 $（this）.trigger（click）; 
} 
函数closeFancybox（）{
 $ .fancybox.close（）; 
} 
  

....那么您的 hoverIntent 定制脚本：

  $（。mini-view）。hoverIntent（{
 sensitivity： 7，
 interval：500，
 timeout：0，
 over：openFancybox，
 out：closeFancybox 
}）; // hoverIntent 
  

（请参阅文档以微调您的设置）

...最后，您的 fancybox 自定义脚本将如下所示：

<$ p $ fancybox（{
'overlayShow'：false，
'autoScale'：true
}）;} $ {code> $（。mini-view // fancybox

查看工作示例并随时查看源代码。

SIDE NOTES ：

• 为简化您的代码，您可以实际将两个插件应用于同一个选择器：

    $（。mini-view）
   .fancybox（{
  'overlayShow'：false，
  'autoScale'：true 
  }）
   .hoverIntent（{
   sensitivity：7，
   interval：500，
   timeout：0，
   over ：openFancybox，
   out：closeFancybox 
  }）; 
    




• 由于您在代码中使用的选项，我假定您使用的是fancybox v1.3.4 。

：




DEMO 使用Fancybox（v2.1.5）和hoverIntent（v1.8.0）的最新版本




I am using fancybox as my modal window. I was able to trigger the modal window to open on hover, but I also want it to close the window when the link is not being hovered over (out of focus?).

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

Any help is appreciated.

I added the mouseout, I am not good at js, so refactoring the following would be helpful:

$(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
  });

});

If I go from one link directly to another, without pausing between the two, it doesn't work

解决方案

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)

这篇关于悬停时打开和关闭模式窗口，关闭焦点时关闭模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！