js alert弹窗美化

为了美化js alert弹窗，我们可以使用第三方插件或者自己编写样式来实现。以下是一些常用的方法：

1. SweetAlert2插件：这是一个非常流行的弹窗插件，可以轻松创建漂亮的弹窗效果。它支持多种类型的弹窗，包括警告、错误、成功、信息等等。你可以通过它的官网下载，并按照文档进行配置和使用。

2. 自定义样式：如果你不想使用第三方插件，也可以自己编写css样式，来美化alert弹窗。你可以通过修改弹窗的背景色、字体、边框、阴影等等，来实现你想要的效果。

以下是一个简单的例子，展示如何通过自定义样式来美化alert弹窗：

<style>
    .alert {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
        padding: 20px;
        font-size: 16px;
        color: #333;
    }

    .btn-ok {
        background-color: #007bff;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        margin-top: 10px;
        cursor: pointer;
    }
</style>

<script>
    function myAlert() {
        var msg = "Hello World!";
        var div = document.createElement('div');
        div.classList.add('alert');
        div.innerHTML = msg;
        var btn = document.createElement('button');
        btn.classList.add('btn-ok');
        btn.innerText = 'OK';
        btn.onclick = function() {
            div.parentNode.removeChild(div);
        }
        div.appendChild(btn);
        document.body.appendChild(div);
    }
</script>

<button onclick="myAlert()">Click me</button>

上面的代码会在点击按钮时，弹出一个自定义样式的alert弹窗，包含一条信息和一个确认按钮。你可以根据需要修改样式，来实现你想要的效果。