5

これは私のページのURLです

http://sample.com/mytest.php

このページでは、[サインイン]ボタンをクリックすると、背景が黒のポップアップ画面が表示されます。ただし、ページをズームアウトすると、背景色のサイズが小さくなります。ただし、ズームアウトする場合は、画面全体の背景をカバーしたいと思います。私は自分のページで以下のコードを使用しました。

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

ただし、テストページでは、背景全体をカバーするために以下のコードが使用されています。正常に動作します。

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

わからないログインページの背景に対して同じことを行うにはどうすればよいですか。誰でも私がこの問題を解決するのを手伝ってください。

4

4 に答える 4

5

試す

div.fullscreen{
    position:fixed
    ...
}

絶対:要素は最初に配置された(静的ではない)祖先要素を基準にして配置されます
固定:要素はブラウザウィンドウを基準にして配置されます

于 2012-12-07T10:08:24.083 に答える
4

bodyタグの終了前またはbodyタグの開始後に以下のコードを入力する必要があります

<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を使用できないことです。テーブルの外に移動して、を追加するだけです。Firebugを使用してテストしましたが、機能します。widht:100%height:100%div.black_overlayz-index: 1;

于 2012-12-07T10:24:37.750 に答える