我有一个在iframe
. 我需要显示一个覆盖 div 来覆盖整个页面。问题是覆盖当前仅显示在该iframe
区域中,而不是覆盖整个页面,(我们的应用程序(一个子应用程序)是一组正在加载的应用程序的一部分iframe
)
问问题
6369 次
2 回答
2
你可以做这样的事情
<div id="overlay"></div>
CSS
#overlay
{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .3;
filter: alpha(opacity=30);
-moz-opacity: .3;
z-index: 101;
}
于 2012-08-25T12:33:50.123 回答
0
尝试类似的东西;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<style type="text/css">
html
{
overflow: auto;
}
html, body, div, iframe
{
margin: 0px;
padding: 0px;
height: 100%;
border: none;
}
iframe
{
display: block;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
}
</style>
</head>
<body>
<iframe id="tree" name="myiframe" src="http://www.your_page.com/" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>
</html>
或者你可以使用 JavaScript 之类的;
<script type="Text/JavaScript" language="JavaScript">
<!--
function resize_iframe()
{
var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("cam").style.height=parseInt(height-
document.getElementById("cam").offsetTop-8)+"px";
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;
//Instead of using this you can use:
// <BODY onresize="resize_iframe()">
</script>
</head>
<body>
<iframe id="cam" width="100%" scrolling="yes" src="http://www.your_page.com" onload="resize_iframe()">
</iframe>
</body>
希望这可以帮助。
于 2012-08-25T12:26:40.127 回答