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.

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,


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



16 thoughts on “Model File upload overlay box using jQuery and Thickbox

  1. Peter

    Great post! Helped a lot 😉

  2. @peter – nice to hear that…..

  3. Rushhh

    Thanks for the post, I’ve seen something like this before from jquery web site.

    But works great with a login Thinkbox and Ajax login validation system.

  4. Great post!
    Thanks a lot!

  5. Great post.Thanks!
    Is it possible to refresh index.html when “close this box” was clicked?

  6. rey

    Thanks for the post. This really helped me instead of using moodalbox in my project.
    But I have a question, how can I display the window using Javascript?

  7. todd

    Since the upload happens in an iframe, Is there any way for the parent page to know that the upload was successful, so it can fire a js function on success?

  8. hi i have done my work with your tutorial. I wants to know how to close the window.


  9. hi good thank you master

  10. paulraja

    wow nice post … It reduces a lot of work of mine …

  11. Thanks, I was looking for something like this, code will help!

  12. It is very beneficial script. It should be used.

  13. if CSS was a bit better .. then i would say 5/5 .. for now it’s 4.5/5

  14. Really good article. Thanks.

  15. useful. Thanks for sharing.

  16. Manjula

    Not only this… Your Each n Every posts are very beneficial for web developers. Thanks!! a lot :-)

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>