2016-07-20 5 views
0

私はファンシーボックスを表示して移動させるウィザードタイプのワークフローを持っています。私は単に私がfancyboxに何をしたいのアンカーIDを持つアンカータグを持つHTMLでファンシーボックスのバックグラウンドスクロール.open()

$('a.fancybox').fancybox(); 

:私はそうのような最初のものを開きます。

問題は、私は、サーバーからの応答の後にそうように開いて2番目のボックスに最初のボックスから移動するときに生じる:

$.fancybox.open({ href: '#divIwantAsFancybox' }); 

これはうまくfancyboxを開きますが、この場合にはバックグラウンドのページは、最初のボックスになかった場所をスクロールします。私はファンシーボックスによって生成されたインラインcssとhtmlを調べ、重要な(おそらく)唯一の違いは、.open()を使用しているときに、必要なコンテンツがクラスfancybox-overlayでdivでレンダリングされなくなったということです。ブラウザ内でそのコードに手動でコードを移動すると、そのファンシーボックスは使用できなくなります。私はここにいなくなり、バックグラウンドをスクロールせずに第2のボックスを開くようにfancyboxに指示する方法は知らない。

PS:beforeShowとafterCloseでoverflow: hiddenを設定するCSSのハックを試しましたが、それはブラウザーで私にとってはうまくいくものの、モバイルブラウザーには効果がありません。この質問の目的のために、私は今のところWebソリューションに固執したいと思いますが、モバイルブラウザではうまく動作しないことを知っているので、潜在的にハックを避けることができます。

ありがとうございます。

+0

あなたのアンカーとターゲットdivがどのように埋め込まれているか、あなたのhtmlを表示する必要があるかもしれません。ファンシーボックス内に同じタイプのアンカーを使用するだけで、最初のファンシーボックス – JFK

答えて

0

数時間の掘削の後、overflow: hiddenのトリックを使用していたが、ファンシーボックス部門の1つではなく、身体の一部の人が見つかりました。あなたが$.fancybox()$.fancybox.open()を呼び出すWhenver、あなたはそうのようなコールバック関数に渡すことができます。

$.fancybox({ beforeShow: function() { 
    $('body').css({'overflow':'hidden'}); 
}, afterClose: function() { 
    $('body').css({'overflow':'visible'}); 
}}); 

を誰もがこれを処理するためのより良い方法を知っている場合は、これがあるとして、あなたの2セントを追加すること自由に感じなさい、私の意見では、fancyboxのバグです。私は、$.fancybox.open()$('a.fancybox').fancybox()でアンカーを参照するのと同じように動作するように呼び出すことを期待します。

関連する問題