Have you ever wished of doing something more with what you have been doing with jQuery thickbox? Now it has been more then 6 months that I am using jQuery on different projects. I have extended jQuery many a times during this period and to tell you one thing I have used jQuery for heavy-weight form processing for one of my very complicated project and it included processing of more then 1600 html controls with the help of great jQuery.

Now when it comes to Thickbox it gives nice functionality but many a times it leaves us hungry for more. For example here are the few situations where it will be difficult to use Thickbox without further modification.

  • It let's open window in a IFRAME and close that but what if you can't give 'class="Thickbox"' to any of your link?
  • What if you are not loading those links with page load? (If the links from which you are willing to open Thickbox windows is not available at the time of page load then Thickbox won't work. As Thickbox internally works in a way that it will search for all links with class = "Thickbox" at the time of page load and then customize their onclick events.)
  • What if you want to open second Thickbox window as someone close first one and that too without any user interaction?
  • What if you want to call any javascript function from the parent window? (parent window is the window from which parent window is getting opened.)



jQuery Thickbox is a great solution for many of our requirement but we don't have any option but to modify actual code to use them with complicated and advance situations which we come across.

I have done some modification in Thickbox.js to achive all above 4 points using Thickbox by adding 2 more functions into this great utility and modifying tb_remove function.

Here are 2 functions I have added, you can understand what they do once you read comments.

// To close one thickbox and then open another, this is quite handy
// when you want to open another response modal window on the action of current modal window.
// Opening more then one thickbox window is not possible on the same page,
// so closing one and opening another could be quite handy and we can change height
// and width as well for another window.
var jThickboxNewLink;
function tb_remove_open(reloadLink){
jThickboxReloadLink	=	reloadLink;
tb_remove();
setTimeout("jThickboxNewLink();",500);
return false;
}
// This function will let you open new thickbox window without specifying
// class="Thickbox" and any href="http://web.com" attribute
// It will be helpful when you are dynamically loading any content and
// from those content you would like to open Thickbox windows.
// As basically the nature of thickbox is such that it scans all links (..) tags
// on load using jQuery's $(document).ready function so if your link is loaded using ajex
// or using any dynamic javascript and was not on page at the time of load then this thickbox
// setup won't work and you have to use this function.
function tb_open_new(jThickboxNewLink){
tb_show(null,jThickboxNewLink,null);
}

And here is the tb_remove function with minor modification which will let us call any function of the parent window passed as an argument.

// Modified to provide parent window's function callback
function tb_remove(parent_func_callback) {
$("#TB_imageOff").unbind("click");
$("#TB_closeWindowButton").unbind("click");
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
$("#TB_load").remove();
if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
$("body","html").css({height: "auto", width: "auto"});
$("html").css("overflow","");
}
if(parent_func_callback != undefined)
eval("window."+parent_func_callback);
document.onkeydown = "";
document.onkeyup = "";
return false;
}

See Demo live in action or download zip with examples and modified javascript file.

Let me know if there are any other mods you have done with jQuery thickbox..! or if this post has helped you achieve what you wanted to do with jQuery Thickbox.