Model File upload overlay box using jQuery and Thickbox

Advertisement

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

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

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

  • Peter wrote on 26 December, 2008, 22:31

    Great post! Helped a lot ;-)

  • Roshan wrote on 2 January, 2009, 10:12

    @peter – nice to hear that…..

  • Rushhh wrote on 15 February, 2009, 16:12

    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.

  • Thomas wrote on 20 February, 2009, 7:17

    Great post!
    Thanks a lot!

  • mehmet wrote on 6 April, 2009, 13:10

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

  • rey wrote on 6 April, 2009, 20:00

    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?

  • todd wrote on 16 April, 2009, 6:56

    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?

  • ajay wrote on 3 June, 2009, 12:38

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

    thanks

  • sohbet wrote on 2 July, 2009, 13:19

    hi good thank you master

  • paulraja wrote on 9 July, 2009, 11:28

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

  • Atea Webdevelopment wrote on 15 September, 2009, 21:37

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

  • Kartvizit wrote on 5 January, 2010, 13:30

    It is very beneficial script. It should be used.

  • Pawan Adhikari wrote on 3 March, 2010, 12:15

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

  • della wrote on 16 March, 2010, 20:49

    Really good article. Thanks.

  • Mega wrote on 18 March, 2010, 21:59

    useful. Thanks for sharing.

  • Manjula wrote on 21 April, 2010, 12:37

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

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.