0

无论用户如何调整他/她的窗口大小，我都试图创建一个固定在屏幕中间的弹出窗口

这是我用来完成此任务的 js

$(window).resize(function() {
  return $(".wrapper").css({
  position: "fixed",
  left: ($(window).width() - $(".wrapper").outerWidth()) / 2,
  top: ($(window).height() - $(".wrapper").outerHeight()) / 2
 });
});

我觉得这行得通……我认为我的问题出在 CSS 中

当用户将窗口高度向下压时，我的关闭按钮会向右移动，因为图像所在的 div 包装器似乎不想用图像调整大小。

这是我的小提琴..

http://jsfiddle.net/jBM8Z/1/

因此，如果您将窗口浏览器的高度向下压，则关闭按钮将移开，但如果您刷新页面，则关闭按钮会弹回原位......

我只希望关闭按钮与他的朋友图片

4

2 回答 2

1

在调整大小期间您没有调整 的宽度wrapper，因此它保持原始大小。尝试通过将其设置为与图像相同的宽度来将其拉入：

  $(document).ready(function(){
    $(window).resize(function() {
      return $(".wrapper").css({
        position: "fixed",
        left: ($(window).width() - $(".wrapper").outerWidth()) / 2,
        top: ($(window).height() - $(".wrapper").outerHeight()) / 2,
        width: $(".wrapper img").width()
      });
    });
  });

请注意，如果您有任何填充wrapper，您可能需要调整宽度以考虑到这一点。

于 2013-08-29T23:24:21.403 回答
1

另外，我建议查看 jQuery 的Debounced Resize插件，以便您的更新仅在有人完成调整窗口大小时触发，而不是在他们调整窗口大小时持续触发。

于 2013-08-29T23:28:22.687 回答