解决使用mmenu时Bootstrap Modal加载至页面顶部的问题

我之前在项目里用mmenu搭配Bootstrap Modal的时候也踩过这个坑——Modal总是跑到页面顶部，根本没法正常用。折腾了一阵，整理出几个靠谱的修复方案，你可以试试：

方案1：调整Modal的DOM结构（最推荐） #

mmenu会给菜单容器添加fixed定位、transform等样式，如果把Modal嵌套在<nav id="menu">里面，Modal会继承这些样式，导致定位完全错乱。解决办法很简单：把Modal代码从mmenu的菜单容器里移出来，放到页面根容器（比如<body>）的直接子元素位置，或者<div id="page">的外面。

示例调整后的代码：

<body>
  <div id="page">
    <div class="header">
      <a href="#menu"><span></span></a> Demo
    </div>
    <div class="content">
      <!-- 这里放触发Modal的按钮 -->
      <button type="button" data-bs-toggle="modal" data-bs-target="#myModal">打开Modal</button>
    </div>
    <nav id="menu">
      <div id="panel-menu">
        <ul>
          <li><a href="#/">Home</a></li>
          <li>
            <span>About us</span>
            <ul>
              <!-- 菜单子项 -->
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <!-- 把Modal移到page容器外面，避免受mmenu样式影响 -->
  <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="myModalLabel">Modal标题</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          Modal内容
        </div>
      </div>
    </div>
  </div>
</body>

方案2：用CSS强制覆盖Modal定位样式 #

如果因为业务限制没法移动Modal的位置，可以通过CSS强制重置Modal的定位属性，打破mmenu样式的继承：

/* 强制Modal使用正确的居中定位 */
#menu .modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1060 !important; /* 确保比mmenu的z-index高，mmenu默认一般是1050 */
}

/* 修复遮罩层的定位 */
#menu .modal-backdrop {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050 !important;
}

注意：!important是为了确保覆盖mmenu的内联样式，如果能通过提高选择器优先级（比如加上父类ID）实现，尽量不用!important。

方案3：调整mmenu的初始化配置 #

mmenu提供了配置项可以控制菜单的层级和渲染方式，我们可以降低菜单的z-index，或者调整模态相关配置，避免和Bootstrap Modal冲突：

document.addEventListener("DOMContentLoaded", () => {
  new Mmenu("#menu", {
    // 设置菜单的z-index低于Bootstrap Modal的默认值（1055）
    zposition: {
      fixed: 1040
    },
    // 如果菜单是模态类型，开启关闭选项避免遮挡
    modal: {
      close: true
    }
  });
});

总结 #

最稳妥的是方案1，从DOM结构上避免样式冲突，后续也不容易出现其他奇怪的问题。如果实在没法调整结构，方案2和3也能解决问题。

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