ポップアップdivを作成してポップアップすると、上にスクロールされません。

ここ< BRの長いセット後のリンクがありますコードポップアップdivを作成してポップアップすると、上にスクロールされません。

<html> 
     <head> 
      <style> 
       #container { 
        border: 1px solid black; 
        width: 100px; 
        height: 20px; 
        margin: 0 auto; 
        text-align: center; 
       } 

       #fade { 
        display: none; 
        background: black; 
        opacity:0.4; 
        filter:alpha(opacity=50); 
        z-index: 1; 
        position: fixed; left: 0; top: 0; 
        width: 100%; height: 100%; 
       } 

       #window { 
        width: 200px; 
        height: 50px; 
        background: white; 
        position:absolute; 
        left:40%; 
        top:40%; 
        z-index: 2; 
        text-align: center; 
       } 
      </style> 
      <script type="text/javascript" src='/libs/jquery/jquery.js'></script> 
      <script> 
       $(document).ready(function() { 
        $('#view').click(function() { 
         $('#fade').fadeIn(); 

         var addWindow = "<div id='window'><h3>This is a popup window.</h3></div>" 
         $(addWindow).appendTo('body'); 
        }); 

        $('#fade').click(function() { 
         $('#fade, #window').fadeOut(); 
        }); 
       }); 
      </script> 
     </head> 

     <body> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <div id="container"> 
       <a href="#" id="view"> 
        View window 
       </a> 
      </div> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
      <div id="fade"></div> 
     </body> 
    </html>

だ>、私はちょうど私のページが異なるオブジェクトで混雑していることを言うために意図的にそれをやったし、私のリンクがページの中央にありました。ここで起こったのは、[ビューウィンドウ]をクリックすると、div /ウィンドウが表示されますが、ウィンドウは常にページの上に表示されます。スクロールしてウィンドウが表示されます。私は、ウィンドウを上にスクロールせずに「ウィンドウを表示」リンクをクリックしたのと同じ位置に表示したい。出来ますか？私はそれがちょうどCSSの問題だと思う、助けてください！ありがとう。リンクをクリックすると、

ポップアップ位置はそこから取られて設定されているページの一番上に移動します

1は、容器

されます：私はそれを見るよう

出典

2012-04-20 kimbebot

には二つの問題があります。デフォルトのクリックイベントが発生しないようにしてください。

2クリックするとトップ値が動的に設定され、ポップアップが画面に合わせて表示されるように修正できます。または代わりに位置固定を使用することができます。

私はここの設定例をしました

：http://jsfiddle.net/A2YjS/

出典

2012-04-20 08:56:37 lnrbob

はいあなたはgotto sp00mが書かれているもののような何かを...

をちょうどので、湯が知っている、

トップと左が50％であるべきですマージンleftとmargin marginはそれぞれ幅と高さの半分にする必要があります。これは、ポップアップdivを中心に正確に配置するために使用します。

出典

2012-04-20 11:17:17

コードを次のコードに変更してください

  #window { 
       width: 200px; 
       height: 50px; 
       background: white; 
       position:absolute; 
       left:40%; 
       z-index: 2; 
       text-align: center; 
      } 


     <script> 
      $(document).ready(function() { 
       $('#view').click(function() { 
        $('#fade').fadeIn(); 

        var addWindow = "<div id='window'><h3>This is a popup window.</h3></div>" 
        $(addWindow).appendTo('body'); 

        $('#window').css("top", ($('#view').offset().top) + "px"); 
       }); 

       $('#fade').click(function() { 
        $('#fade').fadeOut(); 
        $('#window').remove(); 
       }); 
      }); 
     </script> 


     <div id="container"> 
      <div id="view"> 
       View window 
      </div> 
     </div>

出典

2012-04-20 12:09:00

ありがとうございます！最初の実行時にウィンドウが適切な場所に表示された後、＃フェードをクリックした後、再び#viewをクリックしましたが、ウィンドウが下部に表示されます。 – kimbebot

「ウィンドウを表示」にというタグを使用している場合は、divタグに置き換えて試してください。 –

ポップアップdivを作成してポップアップすると、上にスクロールされません。

答えて

関連する問題