1

このトピックを検索しました。解決策があると確信していますが、正しいものを探していません...

上部と下部の全幅固定ナビゲーション バーと Fancybox 2.1.4 を備えたカスタマイズされたバージョンの Twitter Bootstrap 2.x (Fluid Responsive) を使用しています。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

bootstrap.min.css

bootstrap-responsive.min.css

modernizr-2.6.2-respond-1.1.0.min.js

jquery.fancybox-media.js?v=1.0.5

jquery.fancybox.css?v=2.1.4

jquery.fancybox.js?v=2.1.4

とにかく、fancybox の使用中に問題が発生しています。ファンシーボックスのコンテンツはすべてiframeを使用しています（iframeのないコンテンツでも同じことをしているように見えますが、それを含めると思いました）。

リンクをクリックすると、fancbox ボックスが画面に表示され、親ウィンドウが (fancybox の後ろに) スクロールバーを生成します。何も害はありませんが、粘着性があるように見えます。キオスクで使用する HTML5 コンテンツを作成しているので、スクロールバーを表示したくありません。

4

1 に答える 1

0

リンクをクリックしたときに、スクロールバーを使用してdivにoverflow:hiddenを設定するだけです。jfiddleを実際に使用したことはありませんが、それによると、ファンシーボックスcssでクラスに乗るだけでうまくいきます。

これをカスタム css ファイルの 1 つに挿入します。

 .fancybox-lock .fancybox-overlay { overflow:hidden; }

ファンシーボックスcssをロードした後にカスタムcssをロードして、自分のCSSが優先されるようにしてください。

オーバーレイしている画像の 1 つが非常に高い (現在のウィンドウ ビューよりも高い) 場合、画像全体を見ることができないため、これには注意してください。

これが差し迫った問題である場合は、JavaScript を使用して、ウィンドウの高さに応じて画像のサイズを変更できます。

于 2013-08-02T01:25:52.600 に答える