Modal-style pops in Javascript and CSS
I haven't seen a simple example on how to do this, so I thought I'd post one here. I've seen the components in various places (how to center stuff, move with scrolling, etc.), but I wanted to tie it all in to one place.
Start with the actual HTML:
<div id="modalPage">
<div class="modalBackground">
</div>
<div class="modalContainer">
<div class="modal">
<div class="modalTop"><a href="javascript:hideModal('modalPage')">[X]</a></div>
<div class="modalBody">
<p>total solid</p>
</div>
</div>
</div>
</div>
Forget the script call there for a minute. The top level div "modalPage" acts as a big container to hide everything. The next one, "modalBackground" is the div we'll use to cover the entire page, somewhat transparent, so you can't click on stuff. The "modalContainer" div is the actual meat of stuff we want to show, which happens to contain a little window-esque header and a body element.
Next up is the CSS. There's a lot of it, but it's not very complicated.
<style type="text/css">
body
{
margin: 0px;
}
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px; left: 0px;
}
.modalBackground
{
filter: Alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4;
width: 100%; height: 100%; background-color: #999999;
position: absolute;
z-index: 500;
top: 0px; left: 0px;
}
.modalContainer
{
position: absolute;
width: 300px;
left: 50%;
top: 50%;
z-index: 750;
}
.modal
{
background-color: white;
border: solid 4px black; position: relative;
top: -150px;
left: -150px;
z-index: 1000;
width: 300px;
height: 300px;
padding: 0px;
}
.modalTop
{
width: 292px;
background-color: #000099;
padding: 4px;
color: #ffffff;
text-align: right;
}
.modalTop a, .modalTop a:visited
{
color: #ffffff;
}
.modalBody
{
padding: 10px;
}
</style>
- "modalPage" is set to cover the entire page, and it's set as "display: none" so that initially you can't see it.
- "modalBackground" sets up a gray screen over the existing page. Note the hacks to get opacity to work in all of the browsers (works in Safari too). The z-index is one of several we'll set so that it's layered correctly.
- "modalContainer" is next and is set up further in the z-index, with its top left corner positioned at the center of the page.
- "modal" is set in the container, and will be the same size, so to make it appear in the right place, we need to set its dimensions, but make its position relative to the container. Since the container's top-left is dead center of the page, we want to go half the width and height from that spot, in a negative direction. This z-index is highest because it's on top.
- The other elements are to setup the content in the "window" that will sit in the middle of the page.
Finally, you'll need just a little Javascript to make it work.
<script language="javascript" type="text/javascript">
function revealModal(divID)
{
window.onscroll = function () { document.getElementById(divID).style.top = document.body.scrollTop; };
document.getElementById(divID).style.display = "block";
document.getElementById(divID).style.top = document.body.scrollTop;
}
function hideModal(divID)
{
document.getElementById(divID).style.display = "none";
}
</script>
revealModal(divID) takes the name of the div and attaches a handler to the window's scroll event. It moves the div to the top of where ever page is, so that it moves with the page and keeps everything covered. The next line changes the display to "block" so you can see it. The third sets the div's initial position. hideModal(divID), appearing in the little link we put in there, will naturally hide it.
To make it go, just attach this onclick to a button or link or something:
<input id="Button1" type="button" value="Click here to be naughty" onclick="revealModal('modalPage')" />
That's it!