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.
How to use the thickbox as modal overlay box?
Let’s look at the step by step to use thickbox for passing variables.
After this, include the thickbox plugin of jQuery,
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,
Furthermore, We’ve used the following property to display the overlay box as modal box.