如何阻止模态框点击外部或按ESC关闭？配置不生效问题

需要禁用模态框点击外部遮罩层、按ESC键自动关闭的功能，已尝试backdrop: 'static'、keyboard: false类配置方案，但功能未正常生效，原有实现代码如下：

HTML部分 #

<div class="container my-5">
  <hr class="my-5">

  <!-- Modal -->
  <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
          </button>
        </div>
        <div class="modal-body">
          <strong>Create an account or Log in to see additional search results...</strong>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
          <button type="button" class="btn btn-primary">Log In</button>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript部分 #

$(function() {
  $('#basicExampleModal').modal('show');
});

按以下步骤逐一排查修复即可：

• 修复DOM结构错误：先删掉modal-header内部多余的孤立</button>标签，标签不闭合会导致整个模态框DOM解析异常，所有配置都可能失效。
• 匹配Bootstrap版本调整写法，不同版本的Bootstrap模态框配置规则不兼容：
  • Bootstrap 4 环境：
    1. 你写的data-backdrop="static"、data-keyboard="false"属性写法本身符合规范，但部分版本下手动调用.modal('show')会覆盖data属性的预设配置，直接在JS初始化时传入完整参数即可：

    $(function() {
      $('#basicExampleModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: true
      });
    });
    

  • Bootstrap 5 环境：
    1. Bootstrap 5对组件data属性做了命名空间调整，所有属性需要加bs-前缀，将HTML上的属性替换为data-bs-backdrop="static"、data-bs-keyboard="false"，同时关闭按钮的属性也要对应改为data-bs-dismiss="modal"。
    2. Bootstrap 5不再依赖jQuery，JS初始化写法调整为原生JS形式：

    const modal = new bootstrap.Modal(document.getElementById('basicExampleModal'), {
      backdrop: 'static',
      keyboard: false
    })
    modal.show()
    

• 排查资源重复加载问题：确认页面没有重复引入jQuery、Bootstrap JS文件，重复加载会导致事件绑定错乱，配置不生效。

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