控制iframe中的Colorbox位置 [英] Controlling Colorbox position inside an iframe

问题描述

我有一个嵌入了iframe的页面。 iframe非常长并且超出了视口。

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

在iframe中我有一长串带链接的文本。当点击其中一个链接时，我正在使用Colorbox显示叠加层。由于iframe的内容太长，因此叠加层并不总是可见，因为它垂直位于iframe的中心而不是父视口的中心。

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?

推荐答案

正如WTK所说，您需要在父级中包含Colorbox JS和CSS文件。然后你可以从iframe里面调用colorbox，就像这样，colorbox是一个用户定义的类......

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.

这篇关于控制iframe中的Colorbox位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！