jQuery FancyBox：スクロール中のウィンドウに対するポップアップの固定位置

Question

ページをスクロールするときに、fancyboxポップアップウィンドウの位置を画面上で固定するにはどうすればよいですか？
このプラグインにはオプションがありますか、それともcssを使用して定義する必要がありますか？ API pageから

Answer 1

、centerOnScrollはあなたが望むもののようだ：

キー：centerOnScroll
デフォルト値：falseを 説明：ページ

Answer 2

スクロールしながら真、FancyBoxを中心にcenterOnScroll APIオプションを使用するだけで問題になるのは、ページを上下にスクロールしている間に、ファンシーボックスのウィンドウがアニメーション化されて中央の位置に戻ってくるのを待ち続けることに気づくでしょう。これはあまりにも大きく見えない "ぎこちない"動きを引き起こします。

ファンシーボックスのソースコードを編集しても問題がなければ、fancybox_get_viewport関数を見つけて変更することができます。私はファンシーボックス1.3.4を使用しています。だから、この見つける：

 _get_viewport = function() { 
     return [ 
      $(window).width() - (currentOpts.margin * 2), 
      $(window).height() - (currentOpts.margin * 2), 
      $(document).scrollLeft() + currentOpts.margin, 
      $(document).scrollTop() + currentOpts.margin 
     ]; 
    }, 

をし、これでそれを置き換える：

 _get_viewport = function() { 
     var isFixed = wrap.css('position') === 'fixed'; 
     return [ 
      $(window).width() - (currentOpts.margin * 2), 
      $(window).height() - (currentOpts.margin * 2), 
      (isFixed ? 0 : $(document).scrollLeft()) + currentOpts.margin, 
      (isFixed ? 0 : $(document).scrollTop()) + currentOpts.margin     
     ]; 
    }, 

これは、問題を修正し、あなたはスクロールアップ、ページダウン時に、今では、あなたのブラウザーで同じ場所に完全に留まります。唯一の問題は、この変更によってアニメーションに問題が発生することがあり、画面の下部から新しいポップアップが表示されることがあります。これを修正するには、さらにいくつかの変更が必要です。

   start_pos = { 
       top : pos.top, 
       left : pos.left, 
       width : wrap.width(), 
       height : wrap.height() 
      }; 

へ：ライン378変更この周り

  final_pos = { 
      top : ((wrap.css('position') === 'fixed') ? pos.top - $(this).scrollTop() : pos.top), 
      left : pos.left, 
      width : wrap.width(), 
      height : wrap.height() 
     }; 

とライン978の周りにあなたは同じものが表示されます。そこにも置き換えてください。これにより、修正プログラムに伴うアニメーションの問題が修正されるはずです。 FancyboxのためのあなたのCSSで最後に

は見つける：

#fancybox-wrap { 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 20px; 
    z-index: 1101; 
    outline: none; 
    display: none; 
} 

とに置き換えた：

#fancybox-wrap { 
    position:fixed; 
    top: 0; 
    left: 0; 
    padding: 20px; 
    z-index: 1101; 
    outline: none; 
    display: none; 
} 

私は、これは彼らのポップアップが完全に画面上に固定されたままに望んでいる道を誰かに役立ちます願っています、私にとってこの解決策があったと思っていますが、自分でそれを理解しなければならなかったのです:)

Answer 3

fancyBox 2.0以降この文書では http://fancyapps.com/fancybox/#docs

autoCenter：trueに設定すると、コンテンツが常に ブールを中央に配置されます。デフォルト値：！isTouch

例：

$('.fc-event').fancybox({ 
    autoCenter: true, 
    type: 'ajax',