Controlling Colorbox position inside an iframe

I have a page with an embedded iframe. The iframe is quite long and extends beyond the viewport.

Inside the iframe I have a long list of text开发者_开发问答 with links. I'm using Colorbox to display an overlay when one of the links is clicked. Because the content of the iframe is so long, the overlay is not always visible as it's being vertically positioned in the center of the iframe rather than the center of the parent viewport.

Can anyone tell me how to display the overlay relative to the viewport or at least relative to the link that's been clicked?

As WTK said, you need to include the Colorbox JS and CSS files in the parent. Then you can just call colorbox from inside the iframe something like this where colorbox is a user defined class...

$("a.colorbox").click(function(){
var linkurl = $(this).attr("href");
parent.$.colorbox({href:linkurl});
return false;
}); 

And the overlays will appear in the correct vertical position.