将iframe动态地用作页面叠加层

Question

我已将以下iframe添加到页面

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

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

反馈是iframe中的按钮：

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

我尝试过使用iframe绝对定位和z-index但是还没有得到任何工作。

Answer 1

哈哈，终于完成了演示！ ：P

好吧，我们走了。如果只需要触发按钮时iframe覆盖整个页面，就可以使用jQuery来处理click事件。您需要使用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");
})

---

演示：http://rafaelalmeida.net78.net/exemplos/soen/29454285-iframe-button/