0

テーブル項目の増加によりページが長くなるため、ボタンをクリックしてダイアログ ボックスを開くと、ページの上部に表示され、上部にスクロールして表示する必要があります。ページのどこにいても、ビューポートの中央に表示したい.

HTMLマークアップを構築し、responseTextをdiv要素に追加するために、phpページにajaxリクエストを作成しています。

背景とそれをオーバーレイするダイアログ ボックスの css コードは次のとおりです。

<script type='text/javascript'>
 div.Background {
background: #FFF;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=28); 
-moz-opacity: 0.8; 
opacity: 0.8;
z-index:999;
 }
   div.Box {
border:1px solid #bbb;  
background:white;
position:absolute;
left:50%;
top:50%;
margin-left:-280px;
margin-top:-195px;
width:500px;
height:420px;
z-index:1000;
 -moz-box-shadow: 1px 3px 3px #ccc;
  -webkit-box-shadow: 1px 3px 3px #ccc;
  box-shadow: 1px 3px 3px #ccc;
 }

 </script>

また、背景の位置を相対的に変更して、ボックスの位置を絶対に無駄にしないようにしたこと、およびjqueryまたは同様のものを使用したくないことに注意してください。ですから、それらの解決策を提案しないでください。皆さんが知っているように..返信してください、事前に感謝します。

4

1 に答える 1

0

最初に気付いたのは、スクリプト タグ内に CSS ルールが含まれていることですが、これは誤りです。スタイルタグ内にある必要があります。つまり、次のようになります。

<style type="text/css">
    /*CSS rules here */
</style>

あなたの質問のために：要素を与える代わりに、position:absoluteそれをに変更してposition:fixedください。これにより、ボックスをウィンドウに対して相対的に配置することができ、ページの残りの部分を上下にスクロールしても、ボックスは同じ位置に留まります。jsfiddleの簡単な例を参照してください。

注意すべきことの 1 つは、IE6 は を認識しないposition:fixedことですが、気にする必要はないかもしれません。

于 2012-07-12T13:27:39.483 に答える