Question

我正在寻找一种在当前视图区域的中心放置popup div-element的正确方法。

例如：我们有一些带有{display:none; position:absolute}的div元素和几个按钮，一个位于文档顶部，第二个位于中心，最后一个位于底部。通过单击此按钮中的任何一个，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 ......我分心了，无法思考（感叹，我希望我再次拥有私人办公室）。

jQuery：将dom元素放在视口中心的最佳方法

1 个答案: