Bootstrap 5.3：如何通过JS/JQuery将已打开模态框背景设为static

核心解决方案（Bootstrap 5） #

你使用的data-bs-前缀说明是Bootstrap 5版本，模态框已打开时，需要直接修改实例配置或调整事件绑定才能生效：

方法1：修改模态框实例配置（推荐） #

点击「Submit」按钮时执行以下代码：

// 绑定Submit按钮点击事件
$('#myModal .btn-submit').click(function() {
  // 获取模态框实例
  const modalInstance = bootstrap.Modal.getInstance(document.getElementById('myModal'));
  // 设置背景为static，阻止点击关闭
  modalInstance.options.backdrop = 'static';
  // 可选：同时阻止ESC按键关闭模态框
  modalInstance.options.keyboard = false;

  // 重新绑定背景点击事件，使新配置生效
  modalInstance._backdrop._element.removeEventListener('click', modalInstance._handleBackdropClick);
  if (modalInstance.options.backdrop) {
    modalInstance._backdrop._element.addEventListener('click', modalInstance._handleBackdropClick);
  }
});

jQuery写法：

$('#myModal').on('click', '.btn-submit', function() {
  const modalInstance = $('#myModal').data('bs.modal');
  modalInstance.options.backdrop = 'static';
  modalInstance.options.keyboard = false;

  modalInstance._backdrop._element.removeEventListener('click', modalInstance._handleBackdropClick);
  if (modalInstance.options.backdrop) {
    modalInstance._backdrop._element.addEventListener('click', modalInstance._handleBackdropClick);
  }
});

方法2：直接阻止背景点击事件（简单粗暴） #

如果不想操作模态框实例，可直接给当前模态框的背景层添加阻止点击的事件：

$('#myModal .btn-submit').click(function() {
  // 获取当前模态框对应的背景层
  const $backdrop = $('#myModal').next('.modal-backdrop');
  // 阻止背景层的点击事件冒泡，避免触发模态框关闭
  $backdrop.on('click', function(e) {
    e.stopPropagation();
  });

  // 可选：阻止ESC按键关闭
  $(document).on('keydown.bs.modal.myModal', function(e) {
    if (e.key === 'Escape' && $('#myModal').hasClass('show')) {
      e.stopPropagation();
    }
  });
});

你之前代码无效的原因 #

• $('.modal').attr('data-bs-backdrop','static');：仅修改了HTML属性，但模态框初始化后会将配置存入实例，修改HTML属性不会同步到实例配置，因此不生效。
• $('#myModal').data('bs.modal');：仅获取了模态框实例，但未对实例做任何修改，自然无效果。
• $('.modal').attr('data-bs-backdrop="static"');：attr()方法语法错误，正确写法是attr('属性名', '属性值')，你将整个键值对作为单个参数传入，无法被识别。
• $("#myModal").modal({'data-bs-backdrop': "static"});：模态框初始化选项不需要带data-bs-前缀，正确选项名是backdrop；且模态框已打开时，此调用会重新初始化，可能导致闪烁，写法不符合API规范。

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