0

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

它由四个div组成：

第一个创建半透明覆盖，创建时可用的下一个最高 z-index。第二个在其顶部创建另一个完全透明的区域，显示设置为 table 并且 z-index 高于先前的覆盖。第三个显示 table-cell 第四个是内容，显示 inline-block。

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

​</p> 

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

​</p>

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

我已经建立了一个 jsfiddle：http: //jsfiddle.net/4K6ug/

谢谢，

布拉德

4

1 回答 1

0

我已经更新了你的jsfiddle

你已经穿上position:fixed了overlay和modaltable。然而，这些元素是嵌套的，所以只有一个应该在这样的位置。

通过嵌套它们，父元素 ( overlay) 什么也不包含。所以它只适用于它的尺寸height:100%;定义overflow:hidden（z-index 在这种情况下也没用。

于 2012-12-03T22:35:28.690 回答