JS 对话框|极客笔记

JS 对话框

在前端开发中，对话框是一个常见的交互组件，用来向用户展示信息并等待用户的反馈。JavaScript提供了多种方式来创建对话框，包括警告框、确认框和提示框等。本文将详细介绍如何使用JavaScript来创建这些对话框，并展示它们的用法。

警告框

警告框用来向用户展示一条警告消息，并等待用户确认。我们可以使用alert()函数来创建一个警告框，语法如下：

alert("这是一个警告框");

当用户打开页面时，会弹出一个警告框显示指定的消息。用户只能点击确认按钮，不能进行其他操作。下面是一个示例代码：

alert("Hello, World!");

运行结果：页面弹出一个警告框，显示消息”Hello, World!”，用户只能点击确认按钮。

确认框

确认框用来向用户展示一条消息，并等待用户点击确认或取消。我们可以使用confirm()函数来创建一个确认框，语法如下：

confirm("这是一个确认框");

当用户点击确认按钮时，confirm()函数会返回true；当用户点击取消按钮时，confirm()函数会返回false。下面是一个示例代码：

if(confirm("你确定要删除这条消息吗？")){
    console.log("用户点击了确认按钮");
} else {
    console.log("用户点击了取消按钮");
}

运行结果：页面弹出一个确认框，显示消息”你确定要删除这条消息吗？”。如果用户点击确认按钮，则在控制台输出”用户点击了确认按钮”；如果用户点击取消按钮，则在控制台输出”用户点击了取消按钮”。

提示框

提示框用来向用户请求输入一段文本，并等待用户的输入。我们可以使用prompt()函数来创建一个提示框，语法如下：

prompt("请输入您的姓名：", "张三");

第一个参数是提示文本，用来向用户解释需要输入的内容；第二个参数是默认值，显示在输入框中。当用户点击确认按钮时，prompt()函数会返回用户输入的内容；当用户点击取消按钮时，prompt()函数会返回null。下面是一个示例代码：

const userName = prompt("请输入您的姓名：", "张三");
if(userName){
    console.log("您输入的姓名是：" + userName);
} else {
    console.log("您取消了输入");
}

运行结果：页面弹出一个提示框，显示提示文本”请输入您的姓名：”，输入框中显示默认值”张三”。如果用户输入内容并点击确认按钮，则在控制台输出”您输入的姓名是：”加上用户输入的姓名；如果用户点击取消按钮，则在控制台输出”您取消了输入”。

自定义对话框

除了上述三种基本的对话框之外，我们还可以通过HTML和CSS来创建自定义的对话框。下面是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义对话框</title>
    <style>
        .dialog {
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 20px;
            width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .dialog h2 {
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="dialog">
        <h2>自定义对话框</h2>
        <p>这是一个自定义的对话框。</p>
        <button onclick="closeDialog()">关闭对话框</button>
    </div>

    <script>
        function closeDialog(){
            document.querySelector(".dialog").style.display = "none";
        }
    </script>
</body>
</html>

在上面的代码中，我们创建了一个包含标题、文本和关闭按钮的自定义对话框。点击关闭按钮时，对话框会隐藏。你也可以根据需要通过HTML和CSS来定制对话框的样式和功能。

通过本文的介绍，你应该已经了解了如何在JavaScript中创建各种类型的对话框，包括警告框、确认框、提示框和自定义对话框。在实际开发中，对话框是一个非常有用的工具，可以提高用户体验和交互性。