window.confirm美化

可以使用CSS和JavaScript来美化window.confirm弹窗。

首先，使用CSS样式来调整窗口的样式，如下所示：

/* 遮罩层 */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

/* 弹窗容器 */
.confirm-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

/* 按钮样式 */
.confirm-btn {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.confirm-btn:hover {
  background: #0062cc;
}

然后，使用JavaScript来替换默认的window.confirm方法，如下所示：

// 替换 window.confirm 方法
window.confirm = function (message) {
  // 创建遮罩层
  var overlay = document.createElement('div');
  overlay.classList.add('confirm-overlay');

  // 创建弹窗容器
  var container = document.createElement('div');
  container.classList.add('confirm-container');

  // 创建提示信息
  var messageEl = document.createElement('p');
  messageEl.innerText = message;
  container.appendChild(messageEl);

  // 创建按钮
  var confirmBtn = document.createElement('button');
  confirmBtn.classList.add('confirm-btn');
  confirmBtn.innerText = '确认';
  confirmBtn.addEventListener('click', function () {
    overlay.remove();  // 移除遮罩层
    return true;  // 确认后返回true
  });
  container.appendChild(confirmBtn);

  var cancelBtn = document.createElement('button');
  cancelBtn.classList.add('confirm-btn');
  cancelBtn.innerText = '取消';
  cancelBtn.addEventListener('click', function () {
    overlay.remove();  // 移除遮罩层
    return false;  // 取消后返回false
  });
  container.appendChild(cancelBtn);

  // 添加弹窗容器到遮罩层
  overlay.appendChild(container);

  // 添加遮罩层到页面
  document.body.appendChild(overlay);
};

这样，调用window.confirm方法时，就会出现美化后的弹窗了。