jQuery模态弹窗滚动时固定居中的实现方案求助

我来帮你搞定这个弹窗滚动时跑偏的问题！其实核心就是让弹窗脱离文档流，始终相对于浏览器视口定位，下面给你两种靠谱的实现方式：

方式一：用CSS强制固定定位（快速生效） #

直接给你的弹窗元素#complete添加固定定位样式，覆盖jQuery可能自带的绝对定位：

#complete {
  position: fixed !important; /* 强制覆盖默认定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让弹窗自身中心和视口中心对齐 */
  z-index: 9999; /* 确保弹窗在所有元素最上层 */
}

这种方法简单直接，不管你用的是jQuery UI的dialog还是自定义弹窗，都能生效。如果弹窗内容太长，记得给内部容器加滚动：

#complete .ui-dialog-content {
  max-height: 80vh; /* 限制最大高度为视口的80% */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

方式二：用jQuery UI Dialog原生配置（更规范） #

如果你用的是jQuery UI的dialog组件，其实可以在初始化时直接设置定位参数，不需要额外写CSS，这是官方推荐的做法：

$(document).ready(function(){
  $('#backbutton2').hide();
  
  $("#complete")
    .attr('title','Audit complete')
    .dialog({
      modal: true, // 保持模态弹窗属性
      position: { my: "center", at: "center", of: window }, // 关键：相对于浏览器窗口居中
      resizable: false, // 可选：禁止用户调整弹窗大小
      draggable: false, // 可选：禁止用户拖动弹窗
      // 其他你原本的配置项...
    });
    
  $('#complete').show();
});

这里的position配置会让弹窗始终锚定在浏览器视口的中心，不管页面怎么滚动都不会移位，完全符合你的需求。

内容的提问来源于stack exchange，提问作者DCJones