The Basics of DHTML Popups

Download sample ZIP archive
	(2) Minimal Usability >

The concept we make use to implement our DHTML popups is the layered HTML. Of course, this means you will need to develop using modern browsers. The plural is not accidental and I strongly suggest to develop and test on Mozilla Firefox, Microsoft Internet Explorer, Safari and Opera too. May sound exagerated but JavaScript implementations have so many essential differences that ignorance to other browsers will be penalized by the lack of incompatibility.

Now back to our layered HTML, we are going to use absolute positioned DIVs in which we will cast the popup HTML code. Additionally, we will make the DIV invisible when the page loads so we can display it when necessary, to be more specific: when the trigger event fires.

<div id='mypopup' name='mypopup' style='position: absolute; width: 250px; height: 200px; display: none; background: #ddd; border: 1px solid #000; right: 0px; top: 500px'>

<p>My content that will be displayed in the popup</p>

</div>

The above HTML code describe exactly an absolute positioned DIV, suitable for our popup. Now let's suppose we want to display it when a regular form button is pressed:

The above input button had been set through the onClick JavaScript event to display the popup as planned. Now let's see this in action.

Voila! It worked. Now please note that there are certain incoveniences besides the look of the popup which is you task to customize. The first issue is that now the popup cannot be closed and then we forced it to display in the right side of the page (through: right: 0px; top: 500px). We will solve this issue in the next lesson named "Minimal Usability for DHTML Popups".