模态叠加中的滚动条和绝对定位元素

Question

我使用的 jquery 模态覆盖几乎是开箱即用的，如下所示：

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

但是，我的叠加层中有一个动态搜索框，当内容很长时，我想要一个垂直滚动条。所以我添加了溢出：自动；像这样的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 知识。如果有人可以帮助我获得覆盖的十字但没有水平滚动条，那就太好了。

谢谢

汤姆

编辑 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 ： ）

Answer 1

也许可以尝试 overflow-y:auto 来代替？我现在不确定该属性的浏览器支持级别。