APEX 23.1：点击模态页面关闭按钮（X）后触发提示

核心思路 #

直接给**关闭按钮（X）**绑定专属的点击事件，完全避开dialog closed这类全局关闭事件，就能精准区分它和取消按钮的操作。

原生JS实现示例 #

假设你的模态框HTML结构如下：

<div class="modal" id="myModal">
  <span class="modal-close">&times;</span> <!-- 关闭按钮X -->
  <div class="modal-content">
    <p>模态框内容</p>
    <button class="modal-cancel">取消</button> <!-- 取消按钮 -->
  </div>
</div>

对应的JavaScript代码：

// 获取关闭按钮元素
const closeBtn = document.querySelector('.modal-close');
// 获取取消按钮元素
const cancelBtn = document.querySelector('.modal-cancel');
// 获取模态框容器
const modal = document.getElementById('myModal');

// 关闭按钮点击事件
closeBtn.addEventListener('click', () => {
  alert('你点击了关闭按钮（X）');
  // 手动关闭模态框
  modal.style.display = 'none';
});

// 取消按钮点击事件（和关闭按钮完全独立）
cancelBtn.addEventListener('click', () => {
  alert('你点击了取消按钮');
  modal.style.display = 'none';
});

框架场景示例（以Bootstrap为例） #

如果使用Bootstrap模态框，关闭按钮默认带data-bs-dismiss="modal"属性，需要先阻止默认行为再处理：

<div class="modal fade" id="bootstrapModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">示例模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>

JS代码：

const bootstrapCloseBtn = document.querySelector('.btn-close[data-bs-dismiss="modal"]');
const bootstrapModal = new bootstrap.Modal(document.getElementById('bootstrapModal'));

bootstrapCloseBtn.addEventListener('click', (e) => {
  // 阻止默认的框架关闭行为
  e.preventDefault();
  // 弹出提示
  alert('你点击了关闭按钮（X）');
  // 手动调用框架方法关闭模态框
  bootstrapModal.hide();
});

关键提示 #

• 不要依赖dialog closed事件：该事件会在所有关闭模态框的操作（包括点击取消按钮、按ESC键等）触发后执行，无法区分操作来源；
• 其他UI框架（如Element UI、Ant Design）同理：找到对应关闭按钮的DOM选择器，直接绑定点击事件即可实现区分；
• 如果模态框是动态生成的，需要用事件委托（比如给父容器绑定事件，通过e.target判断是否点击了关闭按钮）。

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