如何在confirm()弹窗显示时调暗背景，用户应答后恢复正常效果

你重写window.confirm时的核心错误是把原生confirm调用放在了setTimeout异步回调里：

• 异步回调里的return只会把值返回给setTimeout的回调函数，不会作为重写后confirm方法的返回值向外传递
• 重写后的confirm方法本身没有返回值，默认返回undefined（属于假值），所以会直接走if判断的else分支，先弹出「Not confirmed」
• 等同步逻辑执行完，setTimeout的回调才会触发，这时候原生confirm弹窗才弹出来，用户此时的选择已经不会影响之前已经走完的判断逻辑了

另外补充：原生alert/confirm/prompt都是同步阻塞API，调用时会阻塞当前JS线程，根本不需要setTimeout等待弹窗关闭——只要在调用原生弹窗前加上暗化类，浏览器会在弹窗弹出前完成DOM样式渲染，弹窗阻塞期间暗化效果会一直保留，用户关闭弹窗后同步移除暗化类即可。

JS逻辑 #

// 缓存原生confirm方法引用
var originalConfirm = window.confirm;
window.confirm = function(args) {
  // 添加页面暗化类
  document.querySelector("html").classList.add("darkenPage");
  // 同步调用原生confirm，此时线程阻塞，暗化样式正常显示
  const userChoice = originalConfirm(args);
  // 弹窗关闭后移除暗化类
  document.querySelector("html").classList.remove("darkenPage");
  // 将用户选择结果同步返回
  return userChoice;
}

CSS样式 #

html.darkenPage {
  background-color: black;
}

html.darkenPage body {
  opacity: 0.6;
}

测试HTML #

<button onclick="if (confirm('Hello World, yes or no')) { alert('Confirmed'); } else { alert('Not confirmed'); }">Confirm</button>

• 绝对不要在重写的同步弹窗方法里包裹setTimeout、Promise等异步逻辑，一旦外层函数执行完毕退出，异步回调里拿到的弹窗结果就无法同步返回给调用方
• 如果遇到个别浏览器下暗化样式来不及渲染的情况，可以强制触发一次浏览器重绘（比如读取一次document.body.offsetHeight）再调用原生confirm，不要用异步方案。

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