如何隐藏安卓iOS小屏设备模态弹窗 解决bootstrap d-none类不生效问题

• 代码存在重复ID问题：两层div都用了PageAlertModal作为ID，ID唯一是HTML基础规范，冲突会导致样式、JS逻辑都异常
• 显隐类绑定位置错误：Bootstrap模态框触发时会强制修改根元素的display属性，覆盖d-none/d-lg-block的工具类样式，导致显隐控制失效
• 存在冗余嵌套：不需要在模态框外层额外套一层带显隐类的div，多余嵌套反而增加样式冲突概率

方案1：纯CSS调整（最简单） #

直接删除冗余嵌套和重复的模态框定义，把显隐类绑定到modal-dialog节点上即可，完整正确代码如下：

<div class="modal fade" id="PageAlertModal" tabindex="-1" role="dialog" aria-labelledby="PageAlertModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered d-none d-lg-block" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="PageAlertModalTitle" runat="server"></h5>
      </div>
      <div class="modal-body" runat="server" id="PageAlertModalBody"></div>
      <div class="modal-footer">
        <div class="custom-control custom-checkbox mr-5">
          <input type="checkbox" class="custom-control-input" id="HidePageAlertCb" />
          <label class="custom-control-label" for="HidePageAlertCb">Don't show this again</label>
        </div>
        <button type="button" id="PageAlertCloseBtn" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </div>
</div>

说明：modal-dialog节点不会被模态框的显隐逻辑强制修改display属性，工具类可以正常生效，小于lg断点（默认992px）时自动隐藏，桌面端正常显示。

方案2：JS控制（更稳妥，避免样式被覆盖） #

如果后续有自定义模态框样式可能冲突，直接在触发弹窗的逻辑里加宽度判断，仅桌面端执行弹窗显示逻辑，代码如下：

// 示例：你原来触发弹窗的逻辑
function showPageAlert() {
  // Bootstrap默认lg断点为992px，如果你自定义过Bootstrap断点，替换成对应数值即可
  if (window.innerWidth >= 992) {
    $('#PageAlertModal').modal('show');
  }
}

如果用方案2，不需要给modal-dialog加任何显隐类，用原生的模态框结构即可。

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