Posts Tagged ColorBox

Closing ColorBox From an iFrame javascript

Today i need to answer a question that I’ve been asked a couple of times before and explain a state of affairs I’ve found myself in a very few times throughout past projects; how will we have a tendency to shut the Colorbox from inside an iFrame?

Opening The ColorBox

Before I begin to describe the solution let’s take a look at how we have a tendency to open the ColorBox in the initial place. to try and do this we might do one thing like so:

$(“.iframeAnchor”).colorbox({width:”80%”, height:”80%”, iframe:true});
<a class=’iframeAnchor’ href=”colorbox-iframe.html”>Open ColorBox</a>

The two key elements here are setting the ‘iframe’ choice to true, and specifying the supply of the iFrame in the ‘href’ attribute of the link, in this case colorbox-iframe.html. It’s this file where our button to shut the ColorBox can reside.

Closing The ColorBox

Now the ColorBox will be opened, let’s verify how we are able to shut it. victimization the example iFrame file from higher than we are able to easy add the subsequent line of code to colorbox-iframe.html:

<input type=”button” name=”btnClose” value=”Close” onclick=”parent.$.colorbox.close()” />

Easy huh? We’re simply job the quality public technique to close a ColorBox button prefixing it with ‘parent.’ to check with the iFrame’s parent.

Posted in: Uncategorized, Web Developers/Designers Reference Guide

Leave a Comment (0) →