jQuery：將dom元素放置在視口中心的最佳方式

Question

我正在尋找一種將popup div元素放置在當前視圖區域中心的正確方法。

例如：我們有一些div元素，其中{display:none; position:absolute}和幾個按鈕，一個在文檔的頂部，第二個在中心，最後一個，在最下面。通過點擊這個按鈕中的任何一個，div應該出現在當前觀看區域的中心

$(".btnClass").click(function(){ 
    //some actions for positioning here 
    $(div_id).show() 
}) 

Answer 1

下面將這樣做。儘管還有其他的方法（使用CSS，邊距，溢出等）...所以這可能不是你的問題的答案，取決於你認爲最好的東西。

$(".btn_class").click(function(){ 
    var win = $(window), 
     winW = win.width(), 
     winH = win.height(), 
     scrollTop = win.scrollTop(), 
     scrollLeft = win.scrollLeft(), 
     container = $("#div_id").css({"display":"block","visibility":"hidden"}), 
     contW = container.width(), 
     contH = container.height(), 
     left = (winW-contW)/2+scrollLeft, 
     top = (winH-contH)/2+scrollTop; 

    container.css({"left":left,"top":top,"visibility":"visible"}); 
}); 

您可能需要調整scrollLeft和scrollTop的......我被分心，想不到（嘆氣，我希望我再有我的私人辦公室）。