jQuery: AJAX and lightbox effect combined

What I'm going to show you how to use AJAX technology to get content for a container and use a lightbox effect to show it.
What we want is to populate a target container upon user request with an external page as source. Then we are going to show the fetched content with a lightbox effect (putting the requested content on top of everything).
We can use jQuery to manage all the operation in a quite simple way.

Let's get directly to the code and I will explain everything.


First of all, we create the destination container:

That is going to be our target. We can use a css style to give it the look we want:

.domMessage {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
    background-color: #346FED;
    text-align: justify;
    color: #FFFFFF;
    padding: 0px;
    border: 2px solid #ddd;
    display:none;
    z-index: 1001;
    position:absolute;
    top:50%;
    left:50%;
    float:left;   
    width:60%;
    height:60%
}

Please notice that the last part of the above code is absolutely important:

1. the container is hidden (display:none;),
2. z-index is set to 1001 (it will be in front of anything),
3. the position is absolute.

Now that we have the target container, we can insert the lightbox:

We style the above div with:

#lightbox {
     display:none;
     background:#000000;
     opacity:0.9;
     filter:alpha(opacity=90);
     position:fixed;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     z-index:1000;
     cursor:wait;
}  

The div will be hidden, and with a z-index just below the domMessage div (1000).
Ok, now we have all the containers ready to be used. The domMessage will be populated with the content of an external page, while the lightbox will hide the background.
We can handle all the procedures from two functions.
First of all, include the jQuery library in the section of your main page:

**Please change the src according to your jquery library path**
Then, insert the following code snippet:

Now that is quite complicated to explain. I will try, for every important line.

var example_check = 0; 

This is the check we will use to see if the container is already populated or not. We start setting it to 0, which means it is not filled.

function loadContent(VarDest,VarUrl, VarAdded) {

The function will have 3 parameters. VarDest is the name of the destination container, VarUrl is the path/name of the file to get, VarAdded is the name of the variable used to check if the container is already populated or not.

if(eval(VarAdded) == 0){

We check if the container is already filled or not. If not, we proceed with the AJAX request. We use eval because we are actually passing a dynamic variable (VarAdded is a variable containing a variable).
We start the AJAX request and then, with:

$(VarDest).append(data);

we append the content to out destination (VarDest). After that, we set VarAdded to 1:

eval(VarAdded + "= 1");

because we now have just populated the container and we don't want to populate it again (on a second eventual request).

$(VarDest).fadeIn();

We show the target container.

$("#lightbox").show();

This will make the lightbox div visible.

The second function (closeContent) is used to hide the target container. Before seeing that part, we have to create the trigger for the loadContent function. In my example I use a simple text (put it where you want in your page):

Click to open domMessage

We style the above div with:

#cto{
    cursor: pointer;
    cursor: hand;
}

Clicking the div will start the loadContent function passing the 3 requested parameters:

1. '#div_example' is our destination div;
2. 'example.asp' is the external page we want to use to populate the target div;
3. 'cs_example' is the variable we use to check if the container is already populated or not.

The external page can contain whatever you like, however I suggest to put something there to allow the closing of the destination div (hiding it and hiding the lightbox div).
In our example, the external page starts with a closing image (choose the one you like):

We style the image with:

.close_btn {
    overflow:hidden;
    height:5%;
}

Clicking the image will trigger the closeContentlightbox.
The external page will contain another div (

) where you will put the text you want to show. This div have a style as well:

.inner {
    overflow:auto;
    height:95%;
    padding-right:20px;
}

Please note that the close_btn div has height:5% and the inner div has 95%. This is made to allow the overflow only in the inner div. You might have to play around with those two values just to evaluate the desired effect.
If the user wants to open the destination div once again, the loadContent function will evaluate the varAdded parameter and will not get the example.asp content (because already there). It will just show the destination div.
I hope that it is clear enough, however if you try to use the above code, you will probably understand it better.

Enjoy!