当前位置：首页 > JavaScript

js实现弹窗报警

2026-02-02 17:29:02JavaScript

使用 `alert()` 方法实现基础弹窗

alert() 是 JavaScript 中最简单的弹窗方法，直接调用即可显示一条消息。

alert("这是一个警告弹窗！");

使用 `confirm()` 方法实现确认弹窗

confirm() 弹窗会显示一条消息并提供“确定”和“取消”按钮，返回布尔值表示用户的选择。

js实现弹窗报警

const result = confirm("你确定要执行此操作吗？");
if (result) {
    console.log("用户点击了确定");
} else {
    console.log("用户点击了取消");
}

使用 `prompt()` 方法实现输入弹窗

prompt() 弹窗会显示一条消息并提供一个输入框，返回用户输入的内容或 null。

js实现弹窗报警

const userInput = prompt("请输入你的名字：", "默认值");
if (userInput !== null) {
    console.log("用户输入：", userInput);
} else {
    console.log("用户取消了输入");
}

自定义 HTML 弹窗

通过动态创建 DOM 元素实现更灵活的弹窗样式和功能。

function showCustomAlert(message) {
    const overlay = document.createElement("div");
    overlay.style.position = "fixed";
    overlay.style.top = "0";
    overlay.style.left = "0";
    overlay.style.width = "100%";
    overlay.style.height = "100%";
    overlay.style.backgroundColor = "rgba(0,0,0,0.5)";
    overlay.style.display = "flex";
    overlay.style.justifyContent = "center";
    overlay.style.alignItems = "center";

    const alertBox = document.createElement("div");
    alertBox.style.backgroundColor = "white";
    alertBox.style.padding = "20px";
    alertBox.style.borderRadius = "5px";
    alertBox.textContent = message;

    overlay.appendChild(alertBox);
    document.body.appendChild(overlay);

    overlay.addEventListener("click", () => {
        document.body.removeChild(overlay);
    });
}

showCustomAlert("这是一个自定义弹窗！");

使用第三方库实现高级弹窗

引入如 SweetAlert2 等库可以快速实现美观的弹窗效果。

<!-- 引入 SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    Swal.fire({
        title: "自定义弹窗",
        text: "使用 SweetAlert2 实现",
        icon: "success",
        confirmButtonText: "确定"
    });
</script>