DIV-based popups are old news. There are plenty of tutorials out there on how to build them. You can make your popup DIVs resizable, draggable and collapsable to ensure no one will miss the traditional browser popup.
As you probably already know, there are some key advantages to using DIV popups. So we won't get too much into the obvious. I wanted to focus on some of the creative opportunities you have with your DIVs.
Border effects
No more browser frame to begin with. Adding a custom popup frame that meets your design standards is much more exciting than just playing around with Javascript parameters to hide or show browser toolbars. Below is a design that I came up with for one of my projects. The use of a drop shadow makes a lot of sense here. It helps set the popup DIV apart from the content underneath. Actually, getting this shadow effect into your DIV frame isn't all that easy. Here is how I did. Feel free to leave comments below if you have better ways of doing this.
The PNG graphics format supports the alpha channel which controls how much transparency a certain pixel has. It calculates what color that pixel should have when merged with the color of the pixel underneath. In Photoshop, you can easily generate PNGs for your poup DIV's edges by setting the opacity, hiding your background or whatever layers lie underneath, and saving the graphic as a PNG-24 file with transparency checked.
For most browsers you can simply load the PNGs with "img src=...". Not so for IE6. IE6 won't recognize the alpha channel that way. There is a work-around though. You can use Microsoft's alpha filter in CSS, and add your PNG in form of a DIV with a background (see code sample below)
DIV.popup
TD.rightBorder, DIV.dropDown TD.rightBorder {
width:19px; height:100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/AspenDemo/image/divPopup/rightBorder.png', sizingMethod='scale');
}
You can achieve all kinds of interesting effects for your popups' frame. By the way, when building these DIV popups from scratch, remember to use an iframe underneath the actual DIV. This avoids the ugly bleed-through bug of drop-downs in IE6 and below. It's also referred as the iFrame shim fix. Read here for more information on this problem.
Show and Hide Effects
Another opportunity to be creative with your popups is the way they show and hide. There are plenty of cool Javascript based effects available that you can apply to showing and hiding DIVs. For example, experiment with the effects in the popular Scriptaculous library. I have found it useful to preview effects here and then apply them to my DIV popups.
Background Fade
One other very useful effect I would like to mention is fading out the rest of the window when your DIV popup comes up. This has two major advantages. First, it allows the user to focus on the information inside of your DIV popup. Secondly, by covering your content with an iFrame the user is not able to click on anything but what is inside the DIV popup. This is very useful in many situations that require an action before the rest of the application can become available again. Notice in the sample screenshot below how the rest of the screen is washed out by showing an iFrame with 50% transparency on top of the rest of the content.
Here is a quick overview on how this is done.
Place an iframe on top of your page. All div popups will be using the same iframe.
<iframe id="windowFaderFrame" height="100%" width="100%" frameborder="0" style="display:none; background-color:#000000; filter:alpha(opacity=80); -moz-opacity:.25; opacity:.25; position:absolute; z-index:6000"></iframe>
Then simply show the windowFaderFrame in the same Javascript that opens your popup DIV. Again, you can apply an effect such as fading. This will make it look like the page is slowly moving out of focus.
As you can see, there is so much you can do from a design standpoint when replacing your browser popups with DIVs. I just wanted to share a few ideas. Feel free to add more.