Closing ColorBox From Within an iFrame

May 13th, 2011 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

I’ve wrote a couple of posts previously about the jQuery ColorBox plugin. It really is one of my preferred lightboxes that I find myself using more and more as time goes on.

Today I want to answer a question that I’ve been asked a few times before and explain a situation I’ve found myself in a few times during past projects; how can we close the Colorbox from within an iFrame?

Opening The ColorBox

Before I begin to describe the solution let’s take a look at how we open the ColorBox in the first place. To do this we might do something like so:

<script>
	$(document).ready(function(){
		$(".iframeAnchor").colorbox({width:"80%", height:"80%", iframe:true});
	});
</script>
<a class='iframeAnchor' href="colorbox-iframe.html">Open ColorBox</a>

The two key parts here are setting the ‘iframe’ option to true, and specifying the source of the iFrame in the ‘href’ attribute of the link, in this case colorbox-iframe.html. It’s this file where our button to close the ColorBox will reside.

Closing The ColorBox

Now the ColorBox can be opened, let’s look at how we can close it. Using the example iFrame file from above we can simple add the following line of code to colorbox-iframe.html:

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

Easy huh? We’re simply calling the standard public method to close a ColorBox button prefixing it with ‘parent.’ to refer to the iFrame’s parent.

This entry was posted on Friday, May 13th, 2011 at 11:15 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first