显示覆盖以覆盖整个页面答案

【问题标题】：Display overlay to cover whole page显示覆盖以覆盖整个页面
【发布时间】：2012-08-20 18:07:01
【问题描述】：

我有一个在iframe 中加载的网络应用程序。我需要显示一个覆盖 div 来覆盖整个页面。问题是覆盖目前只显示在iframe区域，并没有覆盖整个页面，（我们的应用程序（一个子应用程序）是在iframe 中加载的一组应用程序的一部分）

【问题讨论】：

#overlay {position: fixed; height: 100%; width: 100%; background: black; opacity: 0.5;}
要覆盖整个窗口，您必须在原始窗口 dom 而不是 iframe 中创建覆盖 div。
@ThomasStachl 是的，它是正确的，我们需要在原始窗口 DOM 中进行，非常感谢

标签： jquery css iframe overlay

【解决方案1】：

你可以这样做

<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;
}

Sample

【讨论】：

如果从 iframe 内调用，此解决方案将仅覆盖 iframe 区域，而不是整个页面

【解决方案2】：

试试类似的东西；

<!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>

希望这会有所帮助。

【讨论】：