控制 iframe 内的 Colorbox 位置

Posted 2023-05-09

【中文标题】控制 iframe 内的 Colorbox 位置

【英文标题】：Controlling Colorbox position inside an iframe

【发布时间】：2011-11-10 13:32:34

【问题描述】：

我有一个嵌入 iframe 的页面。 iframe 很长，超出了视口。

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

谁能告诉我如何相对于视口或至少相对于被点击的链接显示叠加层？

【问题讨论】：

您使用颜色框显示的内容 - 只有那些图像吗？如果是这样，最简单的解决方案是将单击的图像 href 传递给父框架，然后使用 colorbox 显示它（从父窗口中调用 colobox 以克服定位问题）。

感谢 WTK，我认为我现在走在正确的轨道上。

【参考方案1】：

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

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

叠加层将出现在正确的垂直位置。

【讨论】：

但万一我们必须跨域使用？