Ich verwende die Jquery modale Overlay so ziemlich aus dem Kasten heraus, wie hier gezeigt:Bildlaufleiste in modalen Overlay und absolut positionierte Elemente
http://flowplayer.org/tools/demos/overlay/index.htm
Allerdings habe ich ein dynamisches Suchfeld in meinem Overlay und wenn der Inhalt lang ist, möchte ich eine vertikale Bildlaufleiste haben. Also habe ich einen Überlauf hinzugefügt: auto; auf die CSS wie folgt aus:
.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;
}
Leider fügt diese automatisch eine horizontale Bildlaufleiste wegen der Schließen-Schaltfläche:
/* 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;
}
ich mit ein paar verschiedene Optionen um gespielt haben, aber ohne Glück. Ich habe leider nicht viele CSS-Kenntnisse. Wenn mir jemand helfen könnte, das überlagerte Kreuz zu bekommen, aber keine horizontale Bildlaufleiste, die schön wäre.
Danke
Tom
EDIT Ein Freund auf Twitter me fix it half. Im Grunde habe ich nur ein weiteres div innerhalb des Popup hinzugefügt und die Rolle auf, die wie folgt festgelegt:
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;
}
Dann wird die enge grenz immer korrekt positioniert ist und interferiert nicht mit der Rolle, da die Rolle nur für die innere div gilt :)