点击关闭按钮弹出确认框后，模态框无法正常关闭或再次打开的问题

我需要在用户点击关闭按钮时弹出确认提示框，确认是否确实要关闭模态框，但尝试的两种解决方案均存在异常：

模态框基础代码 #

模态框结构（非完整） #

<div class="modal fade" id="viewTicketModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="vertical-alignment-helper">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable vertical-align-center">
      <div class="modal-content">
        <div class="modal-header">

模态框触发方式 #

<a><i class="voyager-eye viewBtn" data-toggle="modal" data-target="#viewTicketModal"></i></a>

尝试方案1：手动调用hide方法关闭 #

关闭按钮代码 #

<button type="button" class="btn cancelModalBtnColor" onclick="closeTicketDetailsModal(event)">Close</button>

处理函数 #

function closeTicketDetailsModal(e){
  if(enteredEditModeBefore){
    let text = "Proceeding will discard all changes that you may have made\nDo you wish to continue?";
    e.preventDefault();
    if (confirm(text) == true) {
      console.log("Forgoing Changes!");
      $('#viewTicketModal').modal('hide');
      return;
    } else {
      console.log("You still want your changes!");
      return false;
    }
  } else {
    console.log("HIDING MODAL");
    $('#viewTicketModal').modal('hide');
    return;
  }
}

问题表现 #

模态框能成功隐藏，但后续点击触发按钮无法再次打开模态框。

尝试方案2：使用data-dismiss结合事件阻止 #

关闭按钮代码 #

<button type="button" class="btn cancelModalBtnColor" data-dismiss="modal">Close</button>

事件绑定代码 #

$('#viewTicketModal').on('hide.bs.modal', function(e) {
  e.preventDefault();
  return false;
});

问题表现 #

调用e.preventDefault()并返回false后，仍无法阻止模态框关闭。

问题分析与正确解决方案 #

方案1错误原因 #

手动调用modal('hide')后，Bootstrap模态框的内部状态未被正确重置，或存在未清理的事件绑定，导致再次触发data-toggle="modal"时，模态框初始化逻辑失效。另外，e.preventDefault()在此处多余——该按钮并非表单提交或链接跳转类型，不会触发默认导航行为。

方案2错误原因 #

data-dismiss="modal"的关闭逻辑执行优先级高于你绑定的hide.bs.modal事件，即使在事件中调用e.preventDefault()，也无法阻断data-dismiss触发的关闭流程。

正确实现方式 #

利用Bootstrap模态框的hide.bs.modal事件做确认拦截，同时移除按钮上的data-dismiss属性避免冲突：

1. 修改关闭按钮，移除data-dismiss：

<button type="button" class="btn cancelModalBtnColor">Close</button>

2. 绑定hide.bs.modal事件处理确认逻辑：

$('#viewTicketModal').on('hide.bs.modal', function(e) {
  // 未进入编辑模式，直接允许关闭
  if (!enteredEditModeBefore) return;

  const confirmText = "继续操作将丢弃您所做的所有更改，是否确认继续？";
  if (!confirm(confirmText)) {
    // 阻止模态框关闭
    e.preventDefault();
  }
});

额外注意事项 #

• 确保enteredEditModeBefore变量在用户进入编辑状态时被正确设为true，退出编辑时重置为false。
• 若仍出现无法再次打开的问题，检查是否有其他代码在模态框关闭时修改/删除了模态框DOM结构，或移除了Bootstrap的模态框事件绑定。

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