0
私は箱の外にかなりのjqueryのモーダルオーバーレイを使用しています。しかしスクロールバー
http://flowplayer.org/tools/demos/overlay/index.htm
、私は私のオーバーレイ内の動的検索ボックスを持っています内容が長いときは縦スクロールバーが必要です。そこで、オーバーフロー：autoを追加しました。このようなCSSへ：
.simple_overlay {
/* must be initially hidden */
display:none;
overflow:auto;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
max-height:600px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
残念ながら、これは自動的にあるため、閉じるボタンの水平方向のスクロールバーを追加します。
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(../img/overlay/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
私はいくつかの異なるオプションではなく運の周りプレイしました。私は残念ながらCSSの知識の膨大な量を持っていません。もし誰かが私が上に横たわっている十字架を手に入れることができるなら、美しいと思われる水平スクロールバーはありません。
はEDIT
トム
Twitter上で友人ををありがとう、私はそれを修正する助けました。基本的に私はちょうどこのようなものの上にポップアップ内の別のdivを追加し、スクロールを設定しました：
HTML：
<div class="simple_overlay" id="asearch">
<div id="searchbox">
<form id="amazonsearch" style='float:left;'>
<input class="title" id="amazon-terms">
<button>Search!</button>
</form>
<div id="amazon-results"></div>
</div><!--seachbox-->
</div><!--Overlay-->
CSS：
#searchbox {
overflow:auto;
width:500px;
min-height:200px;
max-height:500px;
}
は、[閉じるクロスは常に正しく配置されていますスクロールは内側のdivにのみ適用されるため、スクロールには意味がありません。