Building Pop-Up DIVs with the DOM and AJAX
(Page 1 of 4 )
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.
A downloadable zip file for this article is available
here.
In that vast and exciting terrain that is web development, there’s a great range of approaches to be followed when it comes to displaying additional information to visitors about the contents of a particular web document. The situation that I just described is usually solved by using some simple, standard solutions, such as including a few “title” attributes in a web page. These are usually attached to the links that are required to show this extra information.
However, this schema can be easily applied to different elements of a specific web document, like images, via the corresponding “alt” attribute, or simply by adding the mentioned “titles” to other tags, such as DIVs, paragraphs, tables, form boxes, and so forth. Until now, all these simple and effective methods that I mentioned before should be quite familiar to you, right?
But what happens if you want to make your web site even richer and more interesting, and wish to show additional content to different users (without sacrificing accessibility and usability) that can’t be housed in simple “title” attributes? For instance, say you need to implement a dynamic advertising system in some words that appear in each of the web documents included in your web site, which display small boxes that contain sponsored links related to the terms in question. Certainly, this happens very frequently, and logically it can’t be addressed by only a few title attributes.
Nevertheless, not all is lost here. Using a proper combination of well-structured markup, along with the help of JavaScript, it’s possible to create the advertising application that I discussed a few lines above (or a similar one, of course), which also can be provided with the ability to display content pulled directly from remote sources like a database table or an XML file. Naturally, the question that comes up now is: is this a hard thing to do? Not at all, believe me!
In the course of this three-part series, I’m going to teach you in a step-by-step format how to built effective pop-up DIVs. These can be used for displaying into any web page not only static information, but dynamic content as well, by utilizing a few simple DOM methods, and the neat functionality provided by AJAX.
At this point, I’m sure that the subject of this article has already caught your attention. So let’s move on and learn together how to create these dynamic pop-up DIVs. It’s going to be an educational experience!
Next: Developing a basic pop-up DIV >>
More JavaScript Articles
More By Alejandro Gervasio
/ 9 
