0

新しいプロジェクトでは、ピンタレストで画像をクリックすると開くような、scroable ライトボックスを作成する必要があります。要件は次のとおりです。

  1. ライトボックスは HTML コンテンツをサポートする必要があります。
  2. コンテンツはモニター画面よりも多くなる場合があります (幅は固定ですが、高さの制限はありません)。
  3. ライトボックスには独立したスクロールバーはありませんが、ピンタレストのようなブラウザーのスクロールバーを使用する必要があります。
  4. ライト ボックスが開いている場合、スクロール イベントはライト ボックスのみをスクロールし、背景はスクロールしません。
  5. Pure Javascript および/または JQuery および/または HTML5/CSS3 ソリューションのみが受け入れられます。

かなりの数のライトボックス JS と JQuery プラグインを試しました。ほとんどの場合、単一画面のライトボックスがサポートされているようです。

上記の要件を達成するために利用可能な JS/JQuery プラグインを知っている人はいますか。そうでない場合、上記の要件を達成するためのカスタム プラグインを作成するのに役立つチュートリアルはありますか。

前もって感謝します、

カピル。

4

2 に答える 2

1

あなたが見ているものは、HTML/CSS を介してのみ可能です。Javascript ライブラリの使用は、簡単にするために必要なだけであり、JS/JS Lib は個人の好みに依存します。

主なロジックに関しては、pintrest では、スクロール機能は CSS プロパティ 'overflow-y: scroll' によって実現されます。オーバーレイ (ライトボックスの背景) の場合、幅/高さは定義されていませんが、CSS プロパティ (上:0;下:0;左:0;右:0;) が魔法のように機能します。

上記の CSS プロパティ (明らかにデザイン用の他のプロパティはほとんどありません) を使用すると、ライトボックスのスクロール機能が表示されます。ただし、2 つの垂直スクロールバーが表示されます。1 つはボディ用、もう 1 つはライトボックス用です。ここでの秘訣は、ボディのスクロールバーを非表示にすることです。これは、ライトボックスが開くときにボディに CSS プロパティ ('overflow: hidden') を与え、閉じるときにそれを削除することで実行できます。これは、JS/JS-lib を介して簡単に実行できます。したがって、2 つのスクロールバーがありますが、一度に 1 つだけを表示すると、必要な効果が得られます。

お役に立てれば。

于 2012-08-09T03:40:46.247 に答える
0

fancybox を (jQuery と一緒に) 使用します: http://www.fancyapps.com/fancybox/

var options = {/* options*/};
$(".links").fancybox(options);

そして、次のような html コンテンツへのリンクがある場合:

<a href='#inline' class='links'>Open fancybox</a>

#inline の内容で fancybox を開きます。例:

<div id='inlines' style='display: none'>
My brilliant fancybox content.
</div>

標準のスクロールバーを使用し、十分に大きくすると、他のコンテンツをスクロールできなくなります。

于 2012-08-07T13:19:38.583 に答える