Model File upload overlay box using jQuery and Thickbox

Few times back, sNare asked me how do display wordpress like overlay box where you can pass the variables when you click on the link and manipulate simultaneous actions in the overlay until user choose to close it. Today, I’ve come up with the solution of this with model upload overlay box using thickbox, a jquery plugin. I’ve used the Iframe content of thickbox while displaying the box as modal box.

LIVE DEMO

How to use the thickbox as modal overlay box?

Let’s look at the step by step to use thickbox for passing variables.

First of all, we have to include jQuery JavaScript Library to our page,

<script type="text/javascript" src="jquery.js"></script>

After this, include the thickbox plugin of jQuery,

<script type="text/javascript" src="thickbox-compressed.js"></script>

There is a CSS for using thickbox which also need to linked to the current page,

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

Now, let’s look at the anchor tag which passes the variables to overlay box and keep the overlay at top no matter how many simultaneous accesses occur in the box.

<a href="file_upload.php?post_id=5&TB_iframe=true&height=200&width=300&modal=true" class="thickbox" ><strong>Upload Files</strong></a>

If you want to know how to use the thickbox, then you can checkout their home page which contains good documentation. The main point is, class=’thickbox’ must be used for the displaying the content in overlay.

How to pass variables to overlay box (thickbox)?

If you look at the href attribute of anchor tag, you can see clearly that I’ve passed post_id variable with value 5 to file_upload.php, which can be easily fetched from PHP using $_GET['post_id'].

How to make overlay box stay opened on simultaneous access?

Now this is part which many people has asked me how to do it. To use thickbox in this fashion, you’ve to use it in iframe content mode.The following property of thickbox make it remained open on simultaneous access,

TB_iframe=true

Furthermore, We’ve used the following property to display the overlay box as modal box.

modal=true

DOWNLOAD SOURCE CODE

Popularity: 11%