我有一个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/
谢谢，
布拉德
1 回答
我已经更新了你的jsfiddle
您已在
overlay和modaltable上放置position:fixed. 但是，这些元素是嵌套的，因此只有一个元素应该处于这样的位置 .通过嵌套它们，父元素（
overlay）包含很好，没有 . 所以它只适用于它的大小定义（height:100%;）并且不会破坏框内容（将其视为使用overflow:hidden） . 在这种情况下，z-index也没用 .