0

我正在为我的一个项目创建一个反馈系统。我的目标设备是 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但它并没有真正解决我的问题。

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

4

2 回答 2

5

无论您向下滚动多远（我认为这是您想要的） ，都会相对于窗口的左上角应用固定定位。

所以：

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

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

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

如果您的弹出窗口需要固定大小 - 不根据窗口的宽度拉伸 - 您可以设置左右（可能为零），然后在这个 div 内，有另一个 div margin:0 auto，这将使内部 div 居中在固定的外部 div 内。

PS 就像你可以同时设置leftand一样right，你也可以同时设置topand bottom，会有对应的结果。但是，如果您需要固定高度，则无法使用该margin:auto技巧将其垂直居中。

于 2012-12-04T19:02:54.760 回答
0

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

于 2012-12-04T19:10:15.443 回答