如何在HTML中复刻JavaScript默认Alert弹窗并去除页面来源提示前缀

嘿，这个问题我太懂了！浏览器原生的alert()弹窗会显示页面来源提示，这是浏览器的安全机制，根本没法直接去掉它。不过我们可以自己写一个和原生alert外观几乎一模一样的自定义弹窗，完美避开那个烦人的前缀。下面是完整的可直接运行的代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 遮罩层：模拟原生alert的半透明背景 */
        .custom-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* 确保弹窗在最上层 */
        }

        /* 弹窗容器：还原原生的白色背景、边框和阴影 */
        .custom-alert-box {
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            padding: 20px;
            width: 300px;
            text-align: center;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }

        /* 确认按钮：模拟原生的蓝色按钮样式 */
        .custom-alert-btn {
            margin-top: 20px;
            padding: 8px 16px;
            background-color: #0078d7;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .custom-alert-btn:hover {
            background-color: #005a9e; /* hover时的深色效果，和原生一致 */
        }
    </style>
</head>
<body>
    <!-- 测试用的触发按钮，你也可以直接调用myFunction -->
    <button onclick="myFunction()">触发弹窗</button>

    <script>
        // 自定义弹窗核心函数
        function myCustomAlert(message) {
            // 创建遮罩层元素
            const overlay = document.createElement('div');
            overlay.className = 'custom-alert-overlay';
            
            // 创建弹窗主体
            const alertBox = document.createElement('div');
            alertBox.className = 'custom-alert-box';
            
            // 创建消息文本
            const messageEl = document.createElement('p');
            messageEl.textContent = message;
            
            // 创建确认按钮
            const okBtn = document.createElement('button');
            okBtn.className = 'custom-alert-btn';
            okBtn.textContent = '确定';
            
            // 点击按钮关闭弹窗并移除DOM元素
            okBtn.addEventListener('click', () => {
                document.body.removeChild(overlay);
            });
            
            // 组装弹窗结构
            alertBox.appendChild(messageEl);
            alertBox.appendChild(okBtn);
            overlay.appendChild(alertBox);
            
            // 将弹窗添加到页面
            document.body.appendChild(overlay);
        }

        // 兼容你原来的myFunction，直接替换成自定义弹窗调用
        function myFunction() {
            myCustomAlert('Alert here');
        }
    </script>
</body>
</html>

几个关键细节说明： #

• 视觉还原：CSS完全复刻了原生alert的样式，包括半透明背景遮罩、白色弹窗、圆角边框、阴影，甚至按钮的颜色和hover效果都和原生保持一致，普通用户几乎看不出区别。
• DOM清理：弹窗关闭后会从页面中移除对应的DOM元素，不会造成冗余。
• 兼容性：所有现代浏览器都支持这个实现，不需要额外依赖。

如果想要更贴近特定浏览器（比如Chrome或Firefox）的原生样式，可以微调CSS的字体、padding等细节，但上面的代码已经能满足绝大多数场景的需求了。

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