js 实现alert

使用 alert() 方法

在 JavaScript 中，alert() 是一个内置的全局方法，用于在浏览器中弹出一个警告框，显示指定的消息。以下是一个基本示例：

alert("这是一个警告消息");

自定义警告框样式

如果需要自定义警告框的样式或行为，可以通过 HTML 和 CSS 创建一个自定义弹窗。以下是一个简单的实现：

<div id="customAlert" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:20px; border:1px solid #ccc; box-shadow:0 0 10px rgba(0,0,0,0.1);">
    <p id="alertMessage"></p>
    <button onclick="document.getElementById('customAlert').style.display='none'">关闭</button>
</div>

<script>
function showAlert(message) {
    document.getElementById('alertMessage').textContent = message;
    document.getElementById('customAlert').style.display = 'block';
}
</script>

调用 showAlert 函数即可显示自定义警告框：

showAlert("这是一个自定义警告消息");

使用第三方库

如果需要更复杂的弹窗功能，可以使用第三方库如 SweetAlert2。以下是一个使用 SweetAlert2 的示例：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire({
    title: "警告",
    text: "这是一个 SweetAlert2 警告框",
    icon: "warning"
});
</script>

注意事项

• alert() 会阻塞浏览器线程，直到用户点击“确定”。
• 自定义弹窗或第三方库通常提供更好的用户体验和灵活性。
• 现代前端开发中，alert() 的使用逐渐减少，推荐使用更友好的交互方式。