开发者

Scroll bar in modal overlay and absolute positioned element

开发者 https://www.devze.com 2023-02-02 13:36 出处:网络
I\'m using the jquery modal o开发者_如何学Pythonverlay pretty much out of the box as shown here:

I'm using the jquery modal o开发者_如何学Pythonverlay pretty much out of the box as shown here:

http://flowplayer.org/tools/demos/overlay/index.htm

However, I have a dynamic search box within my overlay and when the contents are long I want to have a vertical scroll bar. So I added overflow:auto; to the CSS like this:

.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;
}

Unfortunately, this automatically adds a horizontal scroll bar because of the close button:

/* 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;
}

I've played around with a few different options but with no luck. I don't have a huge amount of CSS knowledge unfortunately. If anyone could help me get the overlayed cross but no horizontal scroll bar that would be lovely.

Thank you

Tom

EDIT A friend on twitter helped me fix it. Basically I've just added another div inside the popup and set the scroll on that like this:

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;
}

Then the close cross is always positioned correctly and doesn't intefere with the scroll since the scroll only applies to the inner div :)


Maybe try overflow-y:auto instead? I'm unsure of level of browser support of that property these days.

0

精彩评论

暂无评论...
验证码 换一张
取 消