我已将以下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,但还无法正常工作。
最佳答案
哈哈,终于完成了演示! :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/