Display overlay to cover whole page

I have a web app which is loading within an iframe. I need to display an overlay div to cover the whole page. The problem is that the overlay is currently displaying only in the iframe area and not covering the whole page, (Our application (a child application) is part of a set of applications loading in iframe)

You can do something like this

<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

Try something like;

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

Or you may use JavaScript like;

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

Hope this helps.

来源：https://stackoverflow.com/questions/12121885/display-overlay-to-cover-whole-page

标签

jquery

css

iframe

overlay