I have a javascript function that creates a modal dialog. I want the content, which is of unknown or changing size, to be centered horizontally and vertically. If it outgrows the screen, I want it to scroll.
It is made up of four divs:
The first creates the semi-transparent overlay with the next-highest z-index available when it is created. The second creates another completely transparent area over the top of that with the display set to table and a z-index higher than the previous overlay. The third with a display of table-cell The forth is for the content and has a display of 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>
I cannot get the scrolling to work. I have searched high and low and can't find a good solution. Any help is much appreciated.
I've set up a jsfiddle: http://jsfiddle.net/4K6ug/
Thanks,
Brad