按钮绑定模态框：需关闭模态后再执行打开新框架动作的异常问题

看起来你遇到的核心问题是：按钮的默认跳转动作和模态框显示同时触发了，浏览器优先执行了打开新框架的操作，导致模态框刚出现就被页面跳转冲没了。咱们可以通过阻止默认行为 + 延迟执行原动作的方式来解决，具体步骤如下：

1. 先阻止按钮的默认跳转行为 #

首先，给按钮绑定点击事件，用event.preventDefault()拦截它原本的打开新框架动作，同时显示模态框。假设你的按钮类名是edit-btn，模态框类名是modal，代码示例如下：

// 获取元素
const editBtn = document.querySelector('.edit-btn');
const modal = document.querySelector('.modal');
const modalClose = document.querySelector('.modal-close'); // 模态框的关闭按钮

// 拦截按钮默认行为，显示模态框
editBtn.addEventListener('click', function(e) {
  e.preventDefault(); // 关键：阻止按钮直接跳转
  modal.style.display = 'block'; // 或者用你原本的显示模态框的逻辑，比如加show类
});

2. 绑定模态框关闭后的原动作执行逻辑 #

等用户手动关闭模态框后，再执行原本的打开新框架操作。这里要覆盖所有可能的关闭场景：点击关闭按钮、点击模态框背景、按ESC键，确保无论用户怎么关模态框，都会触发原动作：

// 场景1：点击关闭按钮
modalClose.addEventListener('click', function() {
  modal.style.display = 'none';
  executeOriginalAction(); // 执行原动作
});

// 场景2：点击模态框背景关闭（如果你的模态框支持的话）
modal.addEventListener('click', function(e) {
  if (e.target === modal) {
    modal.style.display = 'none';
    executeOriginalAction();
  }
});

// 场景3：按ESC键关闭
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape' && modal.style.display === 'block') {
    modal.style.display = 'none';
    executeOriginalAction();
  }
});

// 封装原动作函数
function executeOriginalAction() {
  // 这里执行按钮原本的打开新框架逻辑
  window.open(editBtn.href, '_blank'); // 如果是新窗口/新框架
  // 或者如果是当前页面跳转：window.location.href = editBtn.href;
}

特殊情况：如果是表单提交按钮 #

如果你的按钮是表单的提交按钮，那阻止默认行为后，关闭模态框时要手动提交表单：

const form = document.querySelector('#your-form');

// 拦截提交
editBtn.addEventListener('click', function(e) {
  e.preventDefault();
  modal.style.display = 'block';
});

// 关闭后提交表单
modalClose.addEventListener('click', function() {
  modal.style.display = 'none';
  form.submit(); // 手动提交表单
});

这样调整后，点击按钮就会先弹出模态框，等用户关闭后才会执行原本的打开新框架/提交表单动作，完全符合你的预期啦。

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