Bootstrap 4模态框在Edge正常显示，Chrome/Firefox无法显示求助

我刚好碰到过类似的跨浏览器Bootstrap模态框问题，你的情况其实是两个默认CSS规则在Chrome和Firefox里的表现和Edge不一致导致的，下面给你拆解问题和修复方法：

问题现象 #

• 在Edge浏览器中，基于Bootstrap官网示例开发的模态框完全正常，两种内容注入方式（HTML字符串直接插入/远程URL加载）都能正常触发模态框显示
• 在Chrome和Firefox中，点击触发按钮后屏幕会变灰（遮罩层生效），但模态框本身完全看不到；虽然JS里的内容注入逻辑已经执行，但模态框始终不显示

问题根源 #

排查Bootstrap的核心SCSS文件后发现两个关键规则：

• _modal.scss 中的 .Modal { display: None; }：这个规则直接将模态框元素设置为不可见
• _transitions.scss 中的 .fade:not(.show) { opacity: 0; }：当模态框的fade类没有伴随show类时，透明度会被设为0，导致视觉上不可见

Edge浏览器可能对这些规则的解析或应用时机有差异，所以没出现问题，但Chrome和Firefox严格执行了这些样式，导致模态框被隐藏。

修复方法 #

直接移除这两个CSS属性，或者在自定义样式中覆盖它们：

/* 覆盖模态框默认隐藏规则 */
.Modal {
  display: block !important;
}

/* 覆盖fade类的透明度规则，确保模态框在触发时可见 */
.fade:not(.show) {
  opacity: 1 !important;
}

不过更推荐的是检查Bootstrap的初始化逻辑是否正确，确保模态框触发时show类被正确添加到.fade元素上——如果你的JS逻辑没问题，移除那两个冲突的SCSS属性就能解决问题。

你的相关代码参考 #

JavaScript内容注入逻辑 #

<script>
  $('#exampleModal').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget);
    var modal = $(this);
    // 方式1：从HTML字符串加载内容
    modal.find('.modal-body').html("Nice modal body baby...");
    console.log(button.data("url"));
    // 方式2：从data-remote指定的URL加载内容
    //modal.find('.modal-body').load(button.data("url"));
  });
</script>

模态框HTML结构 #

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

触发按钮HTML #

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" style="margin-bottom: 10px" data-url="@Url.Action("_ClientDetails", new { PolicyTransactionNo = Model.PolicyTransactionNo })">
  View Client Details
</button>

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