Question

我有一个创建模态对话框的javascript函数。我希望内容（未知或改变大小）水平和垂直居中。如果它超出了屏幕，我希望它滚动。

它由四个div组成：

第一个创建半透明叠加层，创建时可用下一个最高的z索引。第二个在其顶部创建另一个完全透明的区域，其中显示设置为表格，z-index高于上一个叠加层。第三个显示表格单元格第四个是内容，并显示内联块。

<html>
    <head>
    </head>
    <body>
        <div class="overlay" style="z-index=1;">
            <div class="modaltable" style="z-index=2;">
                <div class="modalcell">
                    <div class="modalcontent">
                        <p>this is some text</p>
                        <p>this is some text</p>
                        <p>this is some text</p>
                        <p> ... repeat to overflow ... </p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

.overlay
{
    background-color: #000;
    opacity: .7;
    filter: alpha(opacity=70);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:auto;
}
.modaltable
{
    display: table;
    text-align: center;
    vertical-align:middle;
    background: rgb(236, 236, 236); /*Fallback if rgba not supported*/
    background: rgba(236, 236, 236, 0);
    background: none\9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ececec, endColorstr=#00ececec); /*IE*/
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modalcell
{
    display: table-cell;
    vertical-align: middle;
    background:rgb(236, 236, 236); /*Fallback if rgba not supported*/
    background:rgba(236, 236, 236, 0);
    background: none\9;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ececec, endColorstr=#00ececec); /*IE*/
}
.modalcontent
{
    display:inline-block;
    overflow:auto!important;
    background-color:white;
    padding:5px;
}

我无法让滚动工作。我搜索了高低，找不到一个好的解决方案。非常感谢任何帮助。

我已经设置了一个jsfiddle：http://jsfiddle.net/4K6ug/

谢谢，

布拉德

Answer 1

我已更新您的jsfiddle

您已在position:fixed和overlay上加了modaltable。但是，这些元素是嵌套的，因此只有一个元素应该处于这样的位置。

通过嵌套它们，父元素（overlay）包含很好，没有。所以它只适用于它的大小定义（height:100%;），如果它的内容打破了盒子内容（将其视为使用overflow:hidden），则不会扩展。在这种情况下，z-index也没用。

HTML / CSS模态对话框：中心未知大小的内容 - 滚动溢出

1 个答案: