Dialog boxes that blend with your design
29th June 2008You have spent time designing your web site. Now spend time designing your dialog boxes. Here is a way to create them using CSS and JavaScript.
This technique requires you to add a div at the bottom of your page. You could either hard-code it or insert it using the DOM. I want to "gray out the rest of the site" when the dialog box appears so I'm adding two divs, one for the transparent gray background and one for the dialog box itself.
<div id="popupBackground" class="popup-background-none"></div>
<div id="popupWindow" class="popup-window-none"></div>
At first both these divs need to be hidden, so the classes for these divs, popup-background-none and popup-window-none, do not need to contain anything more than display:none.
.popup-background-none, .popup-window-none {
display:none;
}
…which is the same as…
.popup-background-none {
display:none;
}
.popup-window-none {
display:none;
}
Now lets create the CSS classes that we can use when we want to display these divs. I'm using position:fixed; so that the dialog box remains visible even if the user scrolls the page. I'll also set the body element's height to 100% and its margins to 0px, or else our background won't cover the whole page in IE.
If you are reading this blog you probably know that IE's support for CSS isn't always too great. IE6 and below do not support position:fixed;, this is fixed in IE7 though, and the opacity property is not supported in IE at all. So, sadly, we are going to have to work around this by using the child selector, which also isn't supported by IE6 and below. We'll first create the classes for IE6, using position:absolute; instead of positoin:fixed;, and then correct the same classes, using the child selector, for all the other browsers. We'll also have to use IE's expression to make our divs scroll with the page and behave like position:fixed; in IE6.
body {
margin:0px;
height:100%;
}
.popup-background {
position:absolute;
top: expression( ( ( foo = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
left:0px;
width:100%;
height:100%;
background-color:#000000;
filter: alpha(opacity=50);
z-index:100;
}
body > .popup-background {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000000;
opacity:0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
z-index:100;
}
.popup-window {
position:absolute;
top: expression( ( 100 + ( foo = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
left:50%;
width:300px;
height:100px;
margin-left:-150px;
background-color:#FFFFFF;
border:1px solid #000000;
z-index:101;
}
body > .popup-window {
position:fixed;
top:100px;
left:50%;
width:300px;
height:100px;
margin-left:-150px;
background-color:#FFFFFF;
border:1px solid #000000;
z-index:101;
}
Now that we have our divs and CSS classes in place all we need is some JavaScript to toggle the class attribute on the divs when the dialog box is to appear or disappear, respectively. Below is a simple JavaScript function that does this and also adds the line "Click here to close this window" in the popup window, where "close" is a link calling the same function to toggle its display.
function togglePopup() {
var popupBacgroundDiv=document.getElementById('popupBackground');
var popupWindowDiv=document.getElementById('popupWindow');
if(popupWindowDiv.className=='popup-window-none') {
popupWindowDiv.innerHTML='Click here to <a href="javascript:void(0);" onmouseup="togglePopup()">close</a> this window.';
popupBacgroundDiv.className='popup-background';
popupWindowDiv.className='popup-window';
} else if(popupWindowDiv.className=='popup-window') {
popupWindowDiv.innerHTML='';
popupBacgroundDiv.className='popup-background-none';
popupWindowDiv.className='popup-window-none';
}
}
Now call this function, togglePopup(), e.g. from a link.
<a href="javascript:void(0);" onmouseup="togglePopup();">Click here</a> to open the dialog box.
You could let your Javascript function accept parameters requesting different types of dialog boxes, different messages to display etc.
Go ahead and style your dialog boxes!
Did you enjoy this post?
If you enjoyed this post you can subscribe to my 
RSS feed to know when I post another article. It would also be great if you bookmarked this post on your favorite social bookmarking site, if you have signed up with any.
