如何用JavaScript替换confirm()为阻塞式美观确认弹窗？

我在以下代码中使用了confirm()：

document.addEventListener('DOMContentLoaded', function() {
    
    const credForms = document.querySelectorAll('form.cred-user-form');
    for (const form of credForms) {
      form.addEventListener('submit', function(event) {
        const result = confirm("Êtes-vous sûr de vouloir supprimer cet utilisateur ?");

        if (!result) {
          event.preventDefault();
          location.reload();
        } 

      });
    }
  });

请问如何将其替换为与confirm()一样具有阻塞特性的美观弹窗？我需要一个能显示“是”“否”按钮的JavaScript函数。

原生confirm()是同步阻塞的，但浏览器不允许自定义同步弹窗（会导致页面卡死），我们可以用Promise + async/await实现逻辑上的阻塞效果，同时完全自定义弹窗样式，步骤如下：

1. 添加自定义弹窗的HTML结构 #

在页面任意位置插入以下HTML（默认隐藏）：

<div id="custom-confirm-modal" style="display: none;">
  <div class="modal-overlay"></div>
  <div class="modal-content">
    <p id="modal-message"></p>
    <div class="modal-buttons">
      <button id="modal-confirm">是</button>
      <button id="modal-cancel">否</button>
    </div>
  </div>
</div>

2. 编写弹窗美化CSS #

添加以下样式让弹窗更美观：

#custom-confirm-modal .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

#custom-confirm-modal .modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

#custom-confirm-modal .modal-buttons {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

#custom-confirm-modal button {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#modal-confirm {
  background: #dc3545;
  color: white;
}

#modal-cancel {
  background: #6c757d;
  color: white;
}

3. 实现自定义confirm函数 #

写一个返回Promise的函数，控制弹窗的显示和用户选择：

function customConfirm(message) {
  return new Promise((resolve) => {
    const modal = document.getElementById('custom-confirm-modal');
    const messageEl = document.getElementById('modal-message');
    const confirmBtn = document.getElementById('modal-confirm');
    const cancelBtn = document.getElementById('modal-cancel');

    // 设置弹窗提示文本
    messageEl.textContent = message;
    // 显示弹窗
    modal.style.display = 'block';

    // 按钮点击处理
    function handleConfirm() {
      resolve(true);
      cleanUp();
    }

    function handleCancel() {
      resolve(false);
      cleanUp();
    }

    // 清理事件监听并隐藏弹窗
    function cleanUp() {
      modal.style.display = 'none';
      confirmBtn.removeEventListener('click', handleConfirm);
      cancelBtn.removeEventListener('click', handleCancel);
    }

    confirmBtn.addEventListener('click', handleConfirm);
    cancelBtn.addEventListener('click', handleCancel);
  });
}

4. 修改原表单提交事件代码 #

将事件处理函数改为async，用await等待用户选择，逻辑和原代码保持一致：

document.addEventListener('DOMContentLoaded', function() {
  const credForms = document.querySelectorAll('form.cred-user-form');
  for (const form of credForms) {
    form.addEventListener('submit', async function(event) {
      // 先阻止默认提交行为
      event.preventDefault();
      
      // 等待用户选择
      const result = await customConfirm("Êtes-vous sûr de vouloir supprimer cet utilisateur ?");

      if (result) {
        // 用户确认，手动提交表单
        form.submit();
      } else {
        // 用户取消，刷新页面
        location.reload();
      }
    });
  }
});

这样实现的弹窗和原生confirm()逻辑一致，代码写法接近，同时可以根据需求修改CSS样式，完全自定义弹窗外观。

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