jQuery Mobile Popup滚动时反复重定位，如何实现随页面同步滚动？

云原生阿岚

2026-10-1

问题原因

你遇到的滚动弹窗移位、闪烁问题是jQuery Mobile Popup组件的默认行为导致的：组件默认开启了trackPosition配置项，会持续监听页面滚动、窗口resize事件，自动调整弹窗位置使其始终保持在视口内，所以滚动时会出现反复重定位的闪烁问题。

解决方案

1. HTML结构

在page容器内编写弹窗代码，保留点击外部关闭、半透明遮罩的原生能力：

<div data-role="page" id="yourPageId">
  <!-- 弹窗结构 -->
  <div data-role="popup" id="customPopup" data-dismissible="true">
    <div style="padding: 1.2rem;">
      你的弹窗内容
    </div>
  </div>

  <!-- 页面其他业务内容 -->
  <div data-role="main" class="ui-content">
    <!-- 页面内容 -->
  </div>
</div>

其中data-dismissible="true"默认就是开启的，显式标注是为了明确点击外部区域关闭的能力。

2. 自定义CSS

调整弹窗定位逻辑和遮罩透明度，实现透出背景、跟随页面滚动的效果：

/* 将弹窗从默认fixed定位改为绝对定位，跟随页面滚动 */
.ui-popup {
  position: absolute !important;
  max-width: 90% !important; /* 左右默认留10%边距，可自行调整 */
}
/* 调整遮罩层透明度，透出后方页面内容，数值可按需修改 */
.ui-popup-screen {
  opacity: 0.4 !important;
  filter: Alpha(Opacity=40) !important; /* 兼容低版本IE */
}

3. JS逻辑配置

关闭默认的位置追踪能力，手动指定弹窗初始位置：

// 监听页面显示事件，自动弹出弹窗
$(document).on("pageshow", "#yourPageId", function() {
  // 初始化弹窗，核心配置：关闭滚动位置追踪
  $("#customPopup").popup({
    trackPosition: false, // 禁用自动保持视口内的逻辑
    transition: "fade" // 可选，设置弹窗出现的过渡动画，不需要可以设为none
  });

  // 手动打开弹窗，指定初始位置：页面顶部往下20px，水平居中
  $("#customPopup").popup("open", {
    x: $(window).width() / 2, // 水平居中坐标
    y: 20 // 距离页面顶部20px，可自行调整边距
  });
});

效果验证

修改后弹窗完全符合需求：

页面加载完成后自动弹出
半透明遮罩透出后方页面内容
点击弹窗外部自动关闭
初始位置在页面顶部，左右保留预设边距
滚动页面时弹窗和页面同步滚动，不会出现移位、闪烁问题

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