JavaScript中如何自定义确认对话框的样式？

JavaScript本身并不能直接控制浏览器原生确认框（alert()和confirm()）的样式，因为这些都是由浏览器底层提供的，无法通过DOM或者CSS进行定制。然而，如果你在创建HTML5的模态窗口（如`<dialog>`元素），你可以利用CSS来改变其外观。

对于自定义模态对话框，你可以创建一个新的HTML结构，并结合CSS来设置样式。例如，可以使用CSS3的`position: fixed`、`z-index`以及一些CSS动画库（如Animate.css）来模拟确认对话框的效果。此外，还可以使用JavaScript来管理和显示这个对话框，包括添加点击事件监听器。

<!-- HTML -->
<button onclick="showCustomConfirm()">点击确认</button>
<dialog id="custom-confirm" style="display: none;">
  <p>这是一个自定义确认信息</p>
  <button type="button">确认</button>
  <button type="button" onclick="hideCustomConfirm()">取消</button>
</dialog>

<!-- CSS (示例，实际应用可能需要更多调整) -->
<style>
#custom-confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
}
</style>

<!-- JavaScript -->
<script>
function showCustomConfirm() {
  document.getElementById('custom-confirm').style.display = 'block';
}

function hideCustomConfirm() {
  document.getElementById('custom-confirm').style.display = 'none';
}
</script>

请注意，这种方法不是真正的“自定义确认对话框”，因为它不会像原生确认框那样阻止其他页面的操作，但它允许你创建符合品牌形象的美观对话框。