Okay, its been somedays I was working on how to create a simple, beautiful yet powerful modal window for a project I am working on.

Modal Window sometimes called as Modal Dialogue box, are widely used across to increase the user experience.

After doing a lot of {re}search, I came across, Lightbox by Lokesh. Then, I came across this LightBox Gone Wild, yes by the folks behind Wufoo.

I must admit, these guys have done a great job!!! Thanks for sharing this.

Now, coming back to our tutorial.

You must have prototype AJAX library to use this {sorry for Non-prototype lovers}. Once, you have both Prototype and Lightbox Gone Wild.

Just add them to your html page.

<link rel=”stylesheet” href=”css/lightbox.css” mce_href=”css/lightbox.css” type=”text/css” />
<script src=”scripts/prototype.js” mce_src=”scripts/prototype.js” type=”text/javascript”></script>
<script src=”scripts/lightbox.js” mce_src=”scripts/lightbox.js” type=”text/javascript”></script>

Once, we have added the libraries to the html page. Now, we move on to create the lightboxes {a.k.a simple html files which will be shown in our Modal Window.}

Some HTML files, lets us say About.html

<p> About Us Page</p>
<h3>This is a simple About Me page, where you can add all HTML tags.</h3>

Now the important task: Activating the Lightbox

<a href=”About.html” mce_href=”About.html” class=”lbOn”>About Me</a>

Notice: the italics class=”lbOn”, onclick this will call the function to load the lightbox.

We can add all the HTML tags inside a lightbox, which means there are N number of options for you to surprise your friends.

De-Activating the Lightbox

<a href=”#” mce_href=”#” class=”lbAction” rel=”deactivate”>Close Lightbox.</a>
A simple link, clicking on which will take you back to the page.

Linking it to another Lighbox inside:

<a href=”confirm.html” mce_href=”confirm.html” class=”lbAction” rel=”insert”>Go to Another Lightbox</a>

Till here we saw how to Activate, Deactivate and Insert a lightbox inside a lightbox.

Now, AJAX stuff.

Lets say you want to give, a form to fill to user and collect the data using the modal window. We can do it, with the help of Prototype library. Use the following piece of code.

insert: function(e){
link = Event.element(e).parentNode;
Element.remove($(‘lbContent’));
var myAjax = new Ajax.Request(
link.href,
{method: ‘post’, parameters: “”, onComplete: this.processInfo.bindAsEventListener(this)}
);
}

I am writing a code to add some more functionality like onload, on mouseover etc. Once done will share the code as well.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

https://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book