移动端模态框Overlay居中异常问题排查求助

1. 补充视口元标签 #

本地页面未添加视口设置会导致移动端布局计算错误（Codepen会自动注入该标签），需在HTML <head>中手动添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 优化模态框CSS与DOM插入逻辑 #

• 给模态框容器设置固定定位+Flex布局，确保全局居中：

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

• 避免动态插入DOM后才设置display: flex，建议初始就将模态框放在页面DOM结构中，仅通过JS切换显示状态：

function showModal() {
  if (modalVisible) return;
  modalVisible = true;
  modal.style.display = "flex";
}

3. 实现背景内容禁止滚动 #

显示模态框时固定body位置并保存滚动状态，关闭时恢复：

let savedScrollTop;

function showModal() {
  if (modalVisible) return;
  // 保存当前滚动位置
  savedScrollTop = window.pageYOffset || document.documentElement.scrollTop;
  // 固定body禁止滚动
  document.body.style.position = 'fixed';
  document.body.style.top = `-${savedScrollTop}px`;
  document.body.style.width = '100%';
  
  modalVisible = true;
  modal.style.display = "flex";
}

function hideModal() {
  if (!modalVisible) return;
  modalVisible = false;
  modal.style.display = "none";
  // 恢复body滚动状态
  document.body.style.position = '';
  document.body.style.top = '';
  window.scrollTo(0, savedScrollTop);
}

4. 兼容Firefox触摸模拟模式 #

Firefox触摸模式下对vh和固定定位的计算存在差异，可尝试替代方案：

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

.modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}

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