Sunday, January 03, 2010

Open a Thickbox window from inside a thickbox window

Do you need to open a thickbox window in the originating page from inside a thickbox window/iframe? (I know its confusing right? definitely pandoras box of thickboxes )

download the modified thickbox code
(Note I have not made a sample but can upon request)

Setup a normal thickbox link/page. For instance this link opens the first thickbox window in an iframe 650 wide by 400 tall.

//header information for test page
<link href="assets/css/thickbox.css" rel="stylesheet" type="text/css" />
<script src="assets/javascript/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="assets/javascript/thickbox.js" type="text/javascript" charset="utf-8"></script> 

<a href="FirstWindow.htm?=true&TB_iframe=true&height=400&width=650" class="thickbox" title="First Window">Open First Window</a>

Then setup the page that opens in the iframe window with the thickbox_iframe. It has been modified to open a new thickbox window in the iframes "Parent window".
By using this method the new window will replace the original window the user originally clicked on.
//header information for Second Window
<link href="assets/css/thickbox.css" rel="stylesheet" type="text/css" />
<script src="assets/javascript/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="assets/javascript/thickbox_iframe.js" type="text/javascript" charset="utf-8"></script> 

<a href="SecondWindow.htm?=true&TB_iframe=true&height=400&width=650" class="thickbox" title="second window">Open second Window</a>

Stumble Upon CodePyro


Unknown said...

please send me the sample

Josh Tischer :: CodePyro said...

The sample code was posted in the article, here is the link.

Or do you mean an actual html sample? I dont have one ready but could throw one together really quickly for you.

Unknown said...

This is the closest thing I've found to what I'm looking for, but I wonder if/how the code could be tweaked further to accommodate my specific need. I am currently opening a thickbox from within an iframed page, and the resulting effect is not satisfactory. What I end up with is the iframed window getting the shaded treatment, but the fixed thickbox does not scroll with the page. I don't want the script to "replace" the other window, I need the thickbox to leap over the iframe and transplant itself over the iframe's parent window (i.e. the whole screen). I'm in desperate need of this, any help would be appreciated!

Josh Tischer :: CodePyro said...

I setup a sample example for you to look at. Make sure that the source is coming from the same website and remove any calls to the scripts. The scripts must be relative so there is not a cross domain conflict.

Also make sure that your iframe window source is calling thickbox_iframe.


Vale Co Xenia said...

Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

Jessica Wil said...

Now Discover the latest news about freebies, games hacks & tips, gift cards and much more. Keep coming for Latest Gaming Updates, Tech news, and Guides at

admin said...

Great Post! Thanks for your Share.

Qualityonesie offers Pikachu, Disney, Anime, Hello Kitty, Animals, Winnie the Pooh, Stitch, Unicorn Kigurumi Onesie Pajamas for Adults and Kids.

Post a Comment