CSS/jQuery-响应设计的关闭按钮停留在右上角

CSS/jQuery - responsive design getting close button to stay in right hand corner

本文关键字：关闭按钮 停留在 右上角 jQuery- 响应 CSS      更新时间：2023-09-26

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

这是我用来完成的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/

因此，如果你按下窗口浏览器的高度，关闭按钮就会移开，但如果你刷新页面，关闭按钮会弹回原位。。。。。。。

我只想关闭按钮与他的朋友的图像

在调整大小的过程中，您没有调整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上有任何填充，则可能需要调整宽度以考虑到这一点。

此外，我建议您查看jQuery的Debounced Resize插件，这样您的更新只有在某人完成窗口大小调整时才会启动，而不是在他们调整窗口大小时连续启动。

相关文章：