JavaScript 对话框

在 JavaScript 中，对话框有 3 种： alert()、confirm() 和 prompt()。它们都是 window 对象的方法。前面我们说过，对于 window 对象的属性和方法，是可以省略 window 前缀的，比如 window.alert() 可以简写为 alert()。

需要特别注意的是，这 3 种对话框都是 “同步阻塞” 的。也就是说，当对话框弹出来时，页面上的所有代码都会暂停执行，直到用户点击按钮关闭对话框为止。

提示对话框：alert()

在 JavaScript 中，我们可以使用 alert() 来实现一个提示对话框。alert() 对话框一般仅仅用于提示一段文本。这个方法在之前都用到烂了，这里我们就不用多说。

对于 alert()，小伙伴们只需记住一点就行：在 alert() 中实现文本换行，用的是 “\n” 。

语法：

alert("提示文本")

示例 1：alert() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        alert("HTML\nCSS\nJavaScript");
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript alert() 示例

确认对话框：confirm()

在 JavaScript 中，confirm() 对话框不仅可以提示一段文本，还提供一个确认按钮。

语法：

confirm("提示文本")

说明：

当我们点击【确定】按钮时，confirm() 会返回 true。如果我们点击【取消】按钮，则 confirm() 会返回 false。

示例 2：confirm() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">回到首页</button>
    <script>
        const oBtn = document.getElementById("btn");

        oBtn.addEventListener("click", function () {
            if (confirm("确定要跳转到绿叶首页吗？")) {
                location.href = "https://www.lvyenet.com";
            } else {
                console.log("你取消了跳转");
            }
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当我们点击【回到首页】按钮后，页面效果如下图 2 所示。

JavaScript confirm 示例效果（1）

JavaScript confirm 示例效果（2）

分析：

在弹出的 confirm() 对话框中，当我们点击【确定】按钮时，confirm() 会返回 true，然后当前窗口就会跳转到绿叶网首页。而当我们点击【取消】按钮时，confirm() 会返回 false，然后就会输出内容。

输入对话框：prompt()

在 JavaScript 中，prompt() 对话框不仅可以提示一段文本，还可以返回一个字符串。

语法：

prompt("提示文本")

示例 3：prompt() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        const oBtn = document.getElementById("btn");

        oBtn.addEventListener("click", function () {
            const name = prompt("请输入你的名字：");

            if (name !== null && name !== "") {
                console.log("欢迎 " + name + " 来到绿叶网");
            } else {
                console.log("用户没有输入名字，或点击了取消");
            }
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当我们点击按钮后，弹出的对话框如下图 2 所示。

JavaScript prompt() 示例效果（1）

JavaScript prompt() 示例效果（2）

分析：

在弹出的对话框中，有一个输入文本框。输入内容，然后点击对话框中的【确定】，就会返回刚刚你输入的文本。

对于 alert()、confirm() 和 prompt() 对话框，我们总结一下（如下表所示）。

3 种对话框对比
方法	说明
alert()	仅提示文字，没有返回值
confirm()	具有提示文字，返回 “布尔值”（true 或 false）
prompt()	具有提示文字，返回 “字符串”

在实际开发中，这 3 种对话框经常会用到，不过我们不会采用浏览器默认的对话框，因为这些默认对话框外观真的是太丑了。为了更好的用户体验，我们都倾向于使用 div 元素来模拟出来，并且结合 CSS3、JavaScript 等来实现酷炫的动画效果（如下图 1~3 所示）。

JavaScript alert() 模态框

JavaScript confirm() 模态框

JavaScript prompt() 模态框