显示覆盖以覆盖整个页面 [英] Display overlay to cover whole page

问题描述

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

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)

推荐答案

可以这样做

<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

这篇关于显示覆盖以覆盖整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！