2012-04-20 8 views
3

私はPinterestと似たページを作成していますが、ユーザーがスクロールするとアイテムが垂直に流れます。ユーザーがこれらの項目の1つをクリックすると、関連する内容のモーダルが開きます。現在、モーダルは絶対配置されたdivです。HTMLスクロールバーをモーダルコンテンツに添付する

モーダルと背景(アイテムリスト)の両方がユーザーのブラウザの高さよりも長くなっています。ブラウザのスクロールバーを背景の高さではなくモーダルdivの高さを表すようにするにはどうしたらいいですか?

背景を隠してモーダルを表示しようとしましたが、モーダルを非表示にして背景を表示すると、ページがすべて元に戻ります。私は、Pinterestのメインページのように、背景をわずかに見えるようにしたいと思います。

答えて

5

のCSSプロパティを与える:

<div style="background-color: rgba(255,255,255, 0.93);position:fixed; 
overflow-x:auto;overflow-y:scroll;bottom:0;left:0;right:0;top:0; 
z-index:9999;"></div> 

それはその後、文書全体を満たし、div要素を作成します中間コンテンツのスクロールバーを追加します。メインを取得することが重要である

$("body").css("overflow", "hidden"); 

:できるだけ早くあなたがあなたのページへの本体(バックグラウンド)を設定する必要がモーダル表示方法:よう

style="overflow:hidden" 

をあなたはjqueryのを使用することができますオーバーフローを隠して他のスクロールバーを削除するよう設定します。 Firefoxでこれをテストしたところ、うまくいきました。私は記述されたdivを持っていたし、ボディスタイルを設定し、それは働いた。私はそれをテストしたときにもドキュメントの真ん中にいました。バックグラウンド文書は、それがどこにあって移動しなかったかにとどまりました。

+0

背景色はPinterestのサイトから直接です。 – CaptainBli

2

、私はモーダルのdivのために、このような何かをするだろう、固定高さのdivモーダルとoverflow:scroll

関連する問題