动态使用 iframe 作为页面覆盖

【问题标题】：using iframe as a page overlay dynamically动态使用 iframe 作为页面覆盖
【发布时间】：2015-06-09 20:21:01
【问题描述】：

我已将以下 iframe 添加到页面中

<iframe src='http://redbug.redrocksoftware.com.au:80/Pages/chamara.html' style="position:absolute;z-index:1;" ></iframe>

chamara.html 页面包含一个按钮，当我单击该按钮时，我需要当前页面覆盖一个过度。

Feedback 是 iframe 内的按钮：

当我点击它时，我需要发生类似下面的事情。

我尝试过使用 iframe 绝对定位和 z-index，但还没有任何效果。

【问题讨论】：

iframe 是否覆盖了所有页面？按钮覆盖是否覆盖了所有 iframe？
@RafaelAlmeida 不。这只是在另一个页面中添加的 iframe，我需要它来动态覆盖整个页面
默认覆盖整个页面还是仅在触发反馈按钮时覆盖？要默认覆盖，请尝试：iframe { position:absolute; top:0; left:0; width:100%; height:100%; z-index:999; }
@RafaelAlmeida 感谢您的回复。触发按钮单击时我需要它

【解决方案1】：

哈哈，终于完成demo了！ :P

好吧，我们走吧。如果你需要 iframe 只在他的按钮被触发时覆盖整个页面，你可以使用 jQuery 来处理点击事件。您需要使用 contents() 来获取 iframe 内容，然后使用 find() 来获取您想要的元素。基本上是这样的：

$("#iframe").contents().find("#iframe_button").click(function () {
    // Button fired!
})

到 iframe 覆盖我写的这个 CSS 类的所有页面：

.iframe_cover {
    position:absolute; 
    top:0; 
    left:0; 
    width:100% !important; 
    height:100% !important;
    border:0;
}

因此，当触发按钮时，iframe 将具有此类。看：

$("#iframe").contents().find("#iframe_button").click(function () {
    $("#iframe").addClass("iframe_cover");
})

【讨论】：