如何阻止点击按钮时关闭Bootbox模态框？

咱们先搞清楚核心问题：你用preventDefault没生效，是因为Bootbox的模态框关闭逻辑大多是通过事件冒泡触发的，并非浏览器默认行为，所以只阻止默认行为不够，得同时切断事件向上传递的路径。下面给你两种靠谱的解决方案：

方案一：手动绑定事件时阻止冒泡 #

如果你坚持要动态追加按钮，可以在绑定点击事件时加上stopPropagation()，彻底阻止事件冒泡到模态框的关闭逻辑上：

// 先创建按钮元素
const displayBtn = $('<button type="button" class="btn btn-primary">Display</button>');
// 绑定点击事件，关键是阻止冒泡
displayBtn.on('click', function(e) {
  e.stopPropagation(); // 切断事件向上传递的路径
  // 这里写你的按钮业务逻辑，比如执行display操作
  console.log("Display按钮被点击，模态框保持打开状态");
});
// 把按钮追加到页脚
dialog.find('.modal-footer').append(displayBtn);

方案二：用Bootbox原生方式添加按钮（更推荐） #

其实Bootbox本身就支持自定义按钮，完全不用手动去DOM里append，这样能避免很多事件冲突问题。比如在创建模态框时直接定义这个按钮：

bootbox.dialog({
  message: "你的模态框内容",
  buttons: {
    // 自定义Display按钮
    display: {
      label: 'Display',
      className: 'btn-primary',
      callback: function() {
        // 返回false就会阻止模态框关闭！
        console.log("点击了Display，模态框不关闭");
        return false;
      }
    },
    // 你原来的其他按钮，比如取消按钮
    cancel: {
      label: 'Cancel',
      className: 'btn-secondary',
      callback: function() {
        // 返回true会正常关闭模态框
        return true;
      }
    }
  }
});

这种方式完全贴合Bootbox的设计逻辑，你只需要通过callback的返回值就能控制模态框是否关闭——返回false留着模态框，返回true或者不写就关闭。

补充：为什么原代码会触发关闭？ #

当你手动把按钮追加到.modal-footer后，点击按钮时事件会向上冒泡到模态框的根容器（.modal），而Bootbox在这个容器上绑定了全局点击事件，判断点击区域符合条件就会触发关闭逻辑。所以阻止冒泡就能切断这个触发链。

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