In the previous entry I showed how to use <div> as a reusable block to make an unobtrusive popup wizard.  Problem with that entry is that it has too much concepts and one may miss out the advantage of this one particular technique so i am dedicating an entry just for it.

The other day a good friend of mine asked me to create a simple three step wizard in AJAX so that it does not reload the page and the whole process feels seamless and smooth. At first i thought, yeah thats easy enough; just change innerHTML property of a div as the user clicks nextwhere the content can be taken from a backend PHP page that keeps track of and records the process. But then he said he wants it in a popup and an unobtrusive one at that. What this means, is that the popup wizard should not be in a separate new window. So in essence its notactually a popup but instead an illusionary effect where the page goes dark while some section is being highlighted making the user thinks that something just popuped up in front of him. Again, easy enough to do withjQuery and there is a wonderfull tutorial on how to do just that.