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>
 
DEMO
http://labs.codepyro.com/samples/
http://labs.codepyro.com/samples/thickbox_iframe_parentwindow_working.zip


Stumble Upon CodePyro

4 comments:

Zubair said...

please send me the sample
zubair.610@gmail.com

Josh Tischer :: CodePyro said...

The sample code was posted in the article, here is the link.
http://labs.codepyro.com/samples/thickbox_iframe_parentwindow.zip

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

Todd Freeman 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 http://domain.com 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.

DEMO
http://labs.codepyro.com/samples/

http://labs.codepyro.com/samples/thickbox_iframe_parentwindow_working.zip

Post a Comment