JAVASCRIPT

Building Pop-Up DIVs with the DOM and AJAX

Pop-up DIVs can be used for displaying static and dynamic content into any web page. This three-part series will show you how to create and use pop-up DIVs with AJAX and the DOM.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 22

January 31, 2007

TABLE OF CONTENTS:

As with many cases concerning the development of web applications, here the best approach to follow begins with a simple example. In the next few lines I’m going to demonstrate how to build a single pop-up DIV which can be attached to any element of a web page. Sounds fairly comprehensive, doesn’t it?

Additionally, in the following screen shot shows clearly that this pop-up DIV is going to work. Have a look at it, please:

Now that you know how the pop-up DIV will work, below I list the markup that corresponds to a basic web page, which contains a single containing element identified as “container.” As you'll see in a few moments, I’ll use this element to attach it to a pop-up DIV via the DOM. But for now I’d like you to take a look at the web document. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>JavaScript-based Pop-Up Div</title>
</head>
<body>
<h1>JavaScript-based Pop-up Div</h1>
   <div class="popupcontainer" id="container">
     <p>Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...<br />
         Content for containing DIV goes here...</p>
</div>
</body>
</html>

As you can see, the structure of the above web page is really simple. Logically, the only detail worth noticing is the inclusion of a DIV element which will be used later on for annexing it to a neat pop-up box, by using the DOM.

So far, so good. As you saw in the previous example, creating the basic markup structure for including a simple pop-up DIV in a web page is indeed a process that can be performed with minor hassles.

Therefore, what comes next? Well, since I already showed you the signature of the web document where I plan to append a pop-up box, in the section to come I’m going to teach you how to create this element in question by using some straightforward DOM methods.

As usual, to see how this will be done, please click on the link below and keep reading.

Next: Dynamically creating a pop-up DIV >>