Summer Note问题：插入链接弹窗会同时关闭父级Bootstrap弹窗

这个问题的核心是事件冒泡冲突：Bootstrap模态框（父弹窗）的关闭逻辑会监听点击事件，而Summernote的链接弹窗触发的点击事件会向上冒泡到父模态框，误触了关闭机制。

下面是三种可行的解决方法：

方法一：阻止Summernote弹窗的事件冒泡 #

给Summernote链接弹窗的按钮和容器绑定事件，阻止点击事件向上传递，避免触发父模态框的关闭逻辑：

// 阻止链接弹窗内按钮的点击事件冒泡
$(document).on('click', '.note-modal .btn', function(e) {
    e.stopPropagation();
});

// 阻止链接弹窗本身的点击事件冒泡
$(document).on('click', '.note-modal', function(e) {
    e.stopPropagation();
});

方法二：修改父Bootstrap弹窗的关闭行为 #

设置父模态框的背景遮罩为不可点击关闭，同时可选禁用ESC键关闭，这样只有主动点击弹窗内的关闭按钮才会关闭父弹窗：

<!-- 父弹窗的HTML结构修改 -->
<div class="modal fade" id="yourParentModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 嵌入Summernote的区域 -->
      <textarea id="summernote"></textarea>
    </div>
  </div>
</div>

方法三：调整Summernote弹窗的挂载容器 #

初始化Summernote时，设置弹窗不挂载到body，而是嵌入到父弹窗内部，从根源上避免事件跨容器冒泡：

$('#summernote').summernote({
  dialogsInBody: false, // 关闭默认的body挂载行为
  // 其他原有配置
});

验证方式：应用任意一种方法后，打开父Bootstrap弹窗，操作Summernote插入链接，点击插入或关闭链接弹窗，确认父弹窗不会被意外关闭即可。

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