如何創建一個彈出的div，當彈出時不會一直滾動到頂部？

下面的代碼如何創建一個彈出的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>

還有很長的集<的BR>，我是故意的只是說，我的頁面擠滿了不同的對象和我聯繫是在頁面的中間後鏈路。這裏發生的事情是，當你點擊'查看窗口'時，會出現一個div /窗口，但是我的窗口總是出現在頁面頂部。它會一直向上滾動，然後我的窗口就會出現。我希望我的窗口出現在我點擊「查看窗口」鏈接的同一位置，而無需一直滾動到頂部。可能嗎？我認爲這只是一個問題，請幫助！謝謝。

來源

2012-04-20 kimbebot

有兩個問題，我看到它：

點擊鏈接將帶您到頁面
彈出位置設置從它採取的託普的容器

1容易，防止點擊事件的默認點擊事件

2您可以通過點擊動態設置頂部值來修復，以便彈出窗口根據屏幕進行定位。或者你可以使用固定位置代替。

我在這裏已經設置一個例子：http://jsfiddle.net/A2YjS/

來源

2012-04-20 08:56:37 lnrbob

是你gotto像做什麼sp00m寫..

只是讓羽知道，

頂部和左側應爲50％並且左邊距和上邊距應分別爲寬度和高度的一半。這用於將彈出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

感謝您的支持！在第一次運行窗口出現在正確的地方，然後我點擊#fade，我再次點擊#view，但窗口出現在底部。 – kimbebot 2012-04-23 01:40:28

如果您使用標記作爲「查看窗口」，請用div標記替換它並嘗試。 – 2012-04-23 10:55:56

如何創建一個彈出的div，當彈出時不會一直滾動到頂部？

回答

相關問題