如何使用CSS为JavaScript的alert弹窗添加自定义样式？

• 原生alert()是浏览器提供的系统级弹窗，不属于当前页面的DOM节点，完全由浏览器自身控制渲染，无法通过CSS自定义样式，也没有DOM元素的id等属性。你写的alert.id = text11完全不生效，同时存在两处语法问题：第一text11没有加引号会被识别为未定义变量，第二alert本身是window对象下的方法不是DOM对象，不存在id属性。

原生alert本身不支持样式自定义，你可以用HTML+CSS+JS模拟实现一个弹窗，完全支持自定义样式调整，示例代码如下：

基础HTML结构 #

<!-- 可选遮罩层 -->
<div id="alertOverlay" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 9998;"></div>
<!-- 自定义弹窗主体 -->
<div id="customAlert" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 24px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999;">
  <p id="alertContent"></p>
  <button id="alertConfirm" style="margin-top: 16px; padding: 6px 14px; border: none; border-radius: 4px; background: #409eff; color: #fff; cursor: pointer;">确定</button>
</div>

<button id="RedirBut">触发弹窗</button>

JS逻辑代码 #

// 封装自定义弹窗方法
function customAlert(text) {
  document.getElementById('alertContent').textContent = text;
  document.getElementById('alertOverlay').style.display = 'block';
  document.getElementById('customAlert').style.display = 'block';
}

// 关闭弹窗逻辑
document.getElementById('alertConfirm').addEventListener('click', () => {
  document.getElementById('alertOverlay').style.display = 'none';
  document.getElementById('customAlert').style.display = 'none';
})

// 按钮点击触发弹窗
document.getElementById('RedirBut').onclick = function(){
  customAlert('тут написан твой текст');
};

你可以直接修改弹窗对应的CSS属性，调整颜色、尺寸、字体、动画等所有样式效果，完全满足自定义需求。

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