JavaScript模式彈出式菜單

我正嘗試創建一個簡單的模式彈出式菜單。我已經完成了CSS，並且Javascript大部分完成了。我正在點擊頁面按鈕處的按鈕，彈出窗口出現，但它出現在頁面的頂部。如果您一直滾動到頁面頂部，它會如何應對。JavaScript模式彈出式菜單

但是我希望模態彈出框出現在當前滾動位置的中心位置。我也希望它在我滾動時保持居中。截至目前，它不會浮在屏幕的中心。

當我滾動時，需要使用什麼javascript屬性來調整彈出div的位置。

我試過，但無濟於事：

function showModal(id) 
{ 
    window.onscroll = function() { document.getElementById(divID).style.top = 
               window.pageYOffset || 
               document.body.scrollTop || 
               document.documentElement.scrollTop; }; 
    document.getElementById(id).style.display = "block"; 
    document.getElementById(id).style.top = 
       window.pageYOffset || 
       document.body.scrollTop || 
       document.documentElement.scrollTop; }; 
}

我使用的是直香草的javascript，沒有jQuery的。

TL; DR：我創建了一個模式彈出窗口，但是當我從頁面的最頂端滾動時，它不保持居中。

來源

2010-09-02 Bob

嘗試position: fixed爲你的CSS，它不會與這個滾動，同時檢查display HTML page after loading complete

例如：

<style> 
#floater {float:left; height:50%; margin-bottom:-1px;} 
#top  {position: fixed; top:0; left: 0; width: 100%; height: 100%; background: #fff} 
#content {clear:both; height:540px; position:relative; height: 100%; width: 100%;} 
</style> 
<div id="top"> 
    <div id="floater"></div> 
    <div id="content"> 
     <div style="border: 1px solid #DDD; padding: 10px; background: #BBB; width: 300px; margin: 0 auto">Popup Contents Here</div> 
    </div> 
</top>

#top要素，使皮革的背景，你可以把它透明，但仍無法點擊。
#floater和#content針對的是vertical centering。

來源

2010-09-02 18:59:14 aularon

我希望能夠滾動。 – Bob 2010-09-02 19:04:54

該頁面仍然會滾動，但彈出的div將保持不變。 – aularon 2010-09-02 19:12:57

我不想彈出div來保持固定。我希望它浮在頁面的中心。 – Bob 2010-09-02 19:22:42

Modal彈出窗口，OnClose彈出事件等等！

https://github.com/reduardo7/xpopup

來源

2013-03-11 19:14:20

JavaScript模式彈出式菜單

回答

相關問題