Question

我正在为我的一个项目创建一个反馈系统。我的目标设备是iPad。基本上发生的是通过ajax调用页面的div，它应该覆盖下面的内容。我有那个部分在工作。

我想要做的是将div锁定在视口的中间。我在我的元素上尝试了position:fixed，但它会锁定在错误的位置。它似乎以视口的初始位置为中心。如果我向下滚动到较长页面的底部并调用我的反馈窗口，它仍然会在顶部附近。

Ajax页面（在调用页面时运行）

$(document).ready(function(){
  $(".popup").css({
    top: "50%",
    left: "50%",
    marginLeft: -$(".popup").width() / 2,
    marginTop: -$(".popup").height() / 2
  });
});

如果我能找到视口的顶部，我想我能够正常工作。

我调查过：http://www.appelsiini.net/projects/viewport但它并没有真正解决我的问题。

任何有关正确方向的帮助，建议或指示都将不胜感激！谢谢！

Answer 1

固定定位相对于窗口的左上角应用，无论你滚动的距离是多少（我认为这是你想要的）。

所以：

.popup {
   position:fixed;
   top:20px;
   left:40px;
   right:40px;
}

首先，将你的弹出窗口从地址栏中放出20px（意思是，即使你滚动到底部）。

接下来，设置left和right将“拉伸”固定元素，从窗口两侧开始和结束40px（或任何你给它的）。这是一个以弹出式div为中心的便捷方式。

如果您的弹出窗口需要是固定大小 - 不是基于窗口宽度拉伸 - 您可以设置左侧和右侧（可能为零），然后在此div内，使用另一个div {{1} }，它将内部div置于固定的外部div中。

P.S。正如您可以同时设置margin:0 auto和left一样，您也可以同时设置right和top，它们会有相应的结果。但是，如果您需要固定高度，则无法使用bottom技巧将其垂直居中。

Answer 2

不知道是否属于这种情况，但如果$(".popup")最初被display:none隐藏，那么它的宽度和高度在页面加载时将为零。

如何将div保持在视口中心

Ajax页面（在调用页面时运行）

2 个答案: