DHTML Popups: Tips and Tricks

The first tip is not tricky at all (pun intended) :-) Be creative when desiging and coding your DHTML popups. A cool design mixed with nice effects can produce great solutions that will eventually meet your requirments for hitting the planned targets (marketing campaings, dynamic forms etc).

For starters, you can consider a DHTML popup that appears by fading in while sliding from the right side and then falls to the bottom of the screen and closing automatically in 15 seconds by sliding in the left hand side of the window. It is important to determine what works best for your site, your color scheme and the other elements already used in the graphical layout.

A special note regarding popups displayed on pages that feature Adobe Flash elements: Flash movies always gain the highest z-index! This means that your popup will not gain total focus if overlapping a Flash movie clip. At the moment writing this tutorial site, I'm aware of a single fix working only on MS Internet Explorer. You must set the wmode parameter as shown in the following example:

For other browsers I suggest disabling the Flash effects by altering either the visible either the display CSS arguments of the objects.

The same note goes for dropdown lists (<select>) in HTML forms. Disabling their visibility is the only workaround I'm aware of at the moment.

Also, never use your DHTML popups to show intrusive advertising. People are never interested in ads they are basically forced to see. Your own marketing campaings are OK, and interesting, if designed corrently and well placed in the layout in order not to alter the user experience; if provided to be useful, the popups will increase the overall user experience.

In the end of the tutorial, I want to thank you for following it and wish you good luck with the DHTML popups!