Bootstrap 4 Modal模态框动态显示/隐藏底部按钮失效问题

核心问题原因 #

• DOM语法错误：包裹两个按钮的父级div属性书写错误，误将class属性写为id=class，导致col-sm-6、text-right等布局类未生效，即使移除Cancel按钮的d-none类，也会因为布局错位导致按钮不可见。
• Bootstrap JS重复加载：同时引入了bootstrap.bundle.min.js和bootstrap.min.js，前者已经完整包含后者的所有功能，重复加载会引发Bootstrap组件逻辑冲突，影响DOM操作的正常执行。
• JS执行时机错误：如果控制显隐的JS代码在模态框DOM渲染完成前执行，jQuery选择器无法匹配到Cancel按钮元素，removeClass操作不会生效。

修复方案 #

1. 修正父级div的属性错误，删除多余的id=前缀：

<div class="modal-footer">
  <!-- 修正后的div属性 -->
  <div class="col-sm-6 text-right btn-grp">
    <button id="btn-modal-ok" type="button" class="btn btn-primary" data-dismiss="modal">
            OK
          </button>
    <button id="btn-modal-cancel" type="button" class="btn btn-secondary d-none" data-dismiss="modal">
            Cancel
          </button>
  </div>
</div>

2. 删除重复的Bootstrap JS引入，仅保留bootstrap.bundle.min.js即可：

<!-- 保留这两个JS和CSS即可 -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />

3. 调整JS执行时机，保证DOM渲染完成后再操作按钮显隐，建议绑定模态框的显示事件动态控制，适配多业务场景：

// 方案1：DOM加载完成后执行逻辑
$(function() {
  // 对应需要显示Cancel按钮的业务场景
  $("#btn-modal-cancel").removeClass("d-none");
})

// 方案2：绑定模态框显示事件，动态判断按钮显隐（更推荐）
// 注意将#yourModal替换为你实际的模态框ID
$('#yourModal').on('show.bs.modal', function () {
  if (/* 你的业务判断条件，比如当前场景需要显示Cancel按钮 */) {
    $("#btn-modal-cancel").removeClass("d-none");
  } else {
    $("#btn-modal-cancel").addClass("d-none");
  }
})

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