如何实现Bootstrap模态框保持开启直至用户点击关闭按钮？

你之前的代码直接阻止了所有模态框关闭行为，这就导致连你想用来关闭窗口的按钮也失效了——核心问题是没区分关闭事件的触发源！

要实现「模态框始终开启，只有点击指定关闭按钮才关闭」的需求，我们只需要在hide.bs.modal事件里判断触发关闭的元素是不是你的窗口关闭按钮，再决定是否阻止关闭。下面是调整后的代码：

jQuery(document).ready(function(){
  // 页面DOM加载完成后立即显示模态框
  const $fileModal = jQuery('#modal').modal('show');

  // 监听模态框的隐藏事件
  $fileModal.on('hide.bs.modal', function(e){
    // 只允许带有data-dismiss="modal"属性的按钮触发关闭
    // 如果你的关闭按钮用了自定义ID，可以把选择器换成#你的按钮ID
    if (!jQuery(e.relatedTarget).is('[data-dismiss="modal"]')) {
      // 不是指定关闭按钮触发的关闭，阻止事件
      e.preventDefault();
    }
  });
});

代码说明： #

• 用document.ready替代window.load：前者在DOM结构加载完成就执行，不需要等图片、样式表等资源加载完毕，更适合模态框的初始化场景。
• 区分关闭触发源：通过e.relatedTarget获取触发关闭动作的元素，判断它是不是你设置的关闭按钮（这里默认用Bootstrap标准的data-dismiss="modal"属性来识别，如果你用了自定义按钮ID，直接把选择器换成#your-close-btn即可）。
• 精准阻止非预期关闭：只有当点击模态框背景、按ESC键这类非用户指定的关闭操作时，才阻止模态框关闭；点击你的窗口关闭按钮时，正常关闭模态框。

这样调整后，你就可以在模态框里反复录入文件详情，直到完成所有批量操作后，点击关闭按钮才会关闭模态框啦！

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