Home   |   The Basics   |   Using Delays   |   Movable Popups   |   Adding Fade Effects   |   Drop-down Effects   |   Slide In   |   Tips & Tricks

DHTML Popups Graphic Enhancement

In the previous examples we saw how popups can be placed with the page that contains it. Now let's focus on it's look and feel. Since the popup is actually a regular DIV, we can place any HTML code within and set CSS attributes exactly as desired. This means you can use even transparent backgrounds (remember that MS Internet Explorer doesn't work with transparent PNGs) to have irregular shapes as background, use HTML tables etc.

This lesson is more related to web design rather than DHTML, so I will provide a single example, one of my favourites: making the popup look like a dialog box generated by your operating system GUI component. To exemplify I will use an example from KDE running over X.org (I'm an avid VectorLinux user :-)), more specific the Contact Us box featured on all WebArticles Media Network sites, accessible from our toolbar.

I'll just name the steps before obtaining the desired image files:

  • make a snapshot of the screen when the target window or dialog box is focused
  • import it to your favourite graphic application (GIMP being mine)
  • adjust the window to fit the desired size of your DHTML popup (380 x 300 pixels in our case)
  • add the caption text and relocate the close button ("X") to a suitable position
  • cut the caption, close button and body background into three new picture files

    • OK, after passing these steps you will end up with three images like these ones:

    Now, we will group these three images in an HTML with clear CSS styling. It is essential to be very strict in these CSS declarations to avoid any crossbrowser issues that may appear. The grouping will be done in a HTML table, casted in the popup DIV. In order to make the close button work, we will make it a regular link with JavaScript destination (href="javascript:styledPopupClose();"):

    <script type='text/javascript'>
    function styledPopupClose() {
     document.getElementById("styled_popup").style.display = "none";
    }
    </script>

    <div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 500px; right: 50px;'>
    <table width='380' cellpadding='0' cellspacing='0' border='0'>
    <tr>
    <td><img height='23' width='356' src='media/x11_title.gif'></td>
    <td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='media/x11_close.gif'
    border='0'></a></td>
    </tr>
    <tr><td colspan='2' style='background: url("media/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
    POPUP CONTENTS GOES HERE :-)
    </td></tr>
    </table>
    </div>

    <input type='submit' value=' Fire ' onClick='document.getElementById("styled_popup").style.display="block"'>

    Now let's test:

    Styling popups is a very large topic and result is directly related to your creativity and design skills. The example above should be treated as it is, as a trivial sample of what you can develop, by no means I recommend it to you since I'm sure you can design better popup layouts ;-)

    This lesson ends the introductory chapter of our site. We invite you to learn how to use delays to control popups.

    Copyright © 2006 Ciprian Dosoftei. All rights reserved.