2

モーダルウィンドウとして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
  });

});

2つのリンクの間で一時停止せずに、あるリンクから別のリンクに直接移動すると、機能しません

4

2 に答える 2

2

.hover()または他のマウスイン/アウトjQueryメソッドを使用してイベントをトリガーする際の主な問題はと呼ばれbubblingます。

特定の問題については、jQueryプラグインhoverIntentを使用するのが最善の策です。あなたが彼らのウェブサイトを訪問するならば、彼らはバブルイベントに対処することが何を意味するかについての良い例を持っています。

hoverIntent jsファイルをロードした後hoverIntent、コールバックとして呼び出されるfancyboxを開閉する2つの関数を作成できます。

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

動作中のデモを見て、ソースコードを自由に調べてください。

サイドノート：

  • コードを単純化するために、実際には両方のプラグインを1つのステップで同じセレクターに適用できます。

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

  • コードで使用したオプションのため、fancyboxv1.3.4を使用していると想定しました。

更新[2015年3月]：

Fancybox（v2.1.5）と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 に答える