5

This is my page URL

http://sample.com/mytest.php

In this page, if we click a Sign In button it will display a popup screen with black background. But if we zoom out the page, then it reduces the size of a background color. But i want to cover background the whole screen if we zoom out. I used the code below in my page.

.black_overlay{
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 2000%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}

But in a test page the below code is used for cover the whole background. It works fine.

<style type="text/css">
  /*give the body height:100% so that its child
    elements can have percentage heights*/
  body{ height:100% }
  /*this is what we want the div to look like*/
  div.fullscreen{
    display:block;
    /*set the div in the top-left corner of the screen*/
    position:absolute;
    top:0;
    left:0;
    background-color: black;
    /*set the width and height to 100% of the screen*/
    width:100%;
    height:100%;
    color: white;
  }
</style>

<div class="fullscreen">
  <p>Here is my div content!!</p>
</div>

How can i do the same for my login page background i don't know. Anyone can please help me to solve this problem.

4

4 回答 4

5

尝试

div.fullscreen{
    position:fixed
    ...
}

absolute：元素相对于其第一个定位（非静态）祖先元素定位
fixed：元素相对于浏览器窗口定位

于 2012-12-07T10:08:24.083 回答
4

您必须在正文标记结束之前或正文标记开始之后放置以下代码

<div class="black_overlay" id="fade" style="display: block;"></div>
于 2012-12-07T10:09:23.217 回答
3

您需要将弹出窗口和背景移到任何其他块元素之外，可能就在</body>. 背景正在拉伸以填充其容器的 100%，即表格单元格而不是正文。这意味着您将不得不更改位置（左右）。

于 2012-12-07T10:08:45.753 回答
3

问题是它div.black_overlay在表格内部，所以你不能使用widht:100%and height:100%。只需移出div.black_overlay表格并添加z-index: 1;. 我已经使用 Firebug 进行了测试，它可以工作！

于 2012-12-07T10:24:37.750 回答