如何用JS创建可自定义样式的prompt()函数？

要实现符合自定义样式、阻塞脚本直到用户交互并返回布尔值的弹窗，可从以下几个方向入手：

1. 用Promise + async/await模拟同步阻塞效果 #

原生prompt()是同步阻塞的，但自定义弹窗只能基于异步交互实现。通过Promise封装弹窗的交互逻辑，再用async/await让调用处的代码看起来像同步执行：

• 封装一个返回Promise的函数，用户点击“是”时resolve(true)，点击“否”时resolve(false)
• 调用该函数时使用await，脚本会暂停执行直到用户完成操作

2. 构建自定义样式的弹窗DOM与事件绑定 #

• 动态创建弹窗所需的DOM元素（遮罩层、弹窗容器、按钮等），按照客户样式规范设置CSS样式，插入到页面中
• 给“是”“否”按钮绑定点击事件，触发Promise的resolve，并在交互完成后移除弹窗DOM，避免页面冗余

示例核心代码：

function customConfirm(message) {
  return new Promise((resolve) => {
    // 创建遮罩层
    const overlay = document.createElement('div');
    overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center;';
    
    // 创建弹窗容器
    const dialog = document.createElement('div');
    dialog.style.cssText = 'background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.15);';
    dialog.innerHTML = `
      <p style="margin: 0 0 16px;">${message}</p>
      <div style="display: flex; gap: 12px; justify-content: flex-end;">
        <button id="customConfirmNo" style="padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">否</button>
        <button id="customConfirmYes" style="padding: 8px 16px; background: #0078d4; color: #fff; border: none; border-radius: 4px; cursor: pointer;">是</button>
      </div>
    `;

    overlay.appendChild(dialog);
    document.body.appendChild(overlay);

    // 绑定按钮事件
    document.getElementById('customConfirmYes').addEventListener('click', () => {
      document.body.removeChild(overlay);
      resolve(true);
    });
    document.getElementById('customConfirmNo').addEventListener('click', () => {
      document.body.removeChild(overlay);
      resolve(false);
    });
  });
}

// 调用示例
async function executeAction() {
  const userConfirm = await customConfirm('确定要执行此操作吗？');
  if (userConfirm) {
    console.log('用户选择了“是”，继续执行脚本');
    // 后续逻辑
  } else {
    console.log('用户选择了“否”，终止操作');
  }
}
executeAction();

3. 处理异步调用的适配问题 #

• 由于async/await本质仍是异步，调用自定义弹窗的函数必须标记为async
• 如果需要在全局同步代码中调用，可使用立即执行函数表达式（IIFE）包裹：

  (async () => {
    const result = await customConfirm('确认操作？');
    // 处理结果
  })();
  

4. 边界情况与兼容性优化 #

• 添加遮罩层点击关闭逻辑（可选），提升用户体验
• 处理多个弹窗叠加的情况，避免DOM元素重复
• 适配不同浏览器的CSS样式兼容性，确保弹窗在目标环境中正常显示

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