diy modals

This is a quick note to my future self about DIY Modals and what not.

First question should always be: wouldn't it be easier to use, say, jqModal? (like I discussed earlier)

But if not, if you need some specific customizations or it's modal-ish but not quite a modal, here are some pointers.

The first thing you might want to get straight is the overlay that shades out the stuff behind. Here's a sample bit of CSS, a class for a simple div:


.overlay {
position:fixed;
z-index:100;
width:100%;
height:100%;
background-color:black;
left:0px;
top:0px;
opacity:.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
So we start with it in a fixed position, so it's relative to the whole page, and then we make it take up the whole page. Setting the left and top makes sure it works even if the HTML for the div isn't the first thing on the page. Then we come to opacity- most browsers now support opacity, the next is for really old IE, the bottom is for IE8. (bleh.)

We then often want to put a dialog or something in front of that.


.dialog {
width:250px;
background-color:#FFFFFF;
z-index:175;
border:1px solid black;
position:relative;
top:40%;
margin:auto;
}
We set the z-index to a bit above the overlay. One gotcha is that, despite the z-index, it was still appearing behind the overlay until we set its position. Setting the margin to auto centers it (as long as it's a fixed width.)


The top is a bit of a hack; it's tricky to center things vertically in CSS, so a compromise is a %-based top value as shown. You could also use javascript or some other CSS layout trick depending on your goals.