如何使 iframe 的灯箱“突破"? [英] How to make a lightbox 'breakout' of an iframe?

问题描述

我在网站的首页上有一个 iframe.iframe 加载一个 .php 页面，该页面具有使用 jQuery 工具选项卡构建的旋转器.在第一个选项卡上，我使用 jQuery Tools Overlay 在灯箱中弹出 YouTube 视频.

I have an iframe on the front page of a site. The iframe loads a .php page which has a rotator built with jQuery Tools Tabs. On the first tab, I use jQuery Tools Overlay to popup a YouTube video in a lightbox.

这在独立页面上一切正常，但是在网站首页上查看时，灯箱仅限于 iframe.

This is all working fine on the stand-alone page, however when viewed on the site's front page the lightbox is confined to the iframe.

我需要灯箱来弹出/突破 iframe 并接管整个网站的首页.

I need the lightbox to popup/breakout of the iframe and takeover the entire site's front page.

有没有办法获取 iframe 的父窗口或顶部窗口，然后在那里打开灯箱?

Is there a way to fetch the iframe's parent window or the top window and then make the lightbox open there?

或者有其他方法可以一起完成吗?

Or is there another method all together with which I could accomplish this?

该站点已被锁定以进行开发，但您可以在此处查看独立的 php 页面:独立页面

The site is locked down for development, but you can view the stand-alone php page here: Stand-Alone Page

推荐答案

任何灯箱"偏好?

如果你很灵活，你可以使用 Fancybox (v2.x) 并达到这个演示中的效果:http://picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html

If you are flexible, you could use Fancybox (v2.x) and achieve that effect like in this demo: http://picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html

在该页面中有两个 iframe:左侧的一个显示您当前的场景，右侧的一个显示您正在寻找的解决方案.

In that page there are two iframes: the one on the left shows your current scenario while the one on the right the solution you are looking for.

UPDATE:使用jQuery.noConflict()

<script type="text/javascript" src="other_lib.js"></script> (mootools)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Code that uses other library's $ can follow here.
</script>

这篇关于如何使 iframe 的灯箱“突破"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！