js弹出对话框函数

在JavaScript中，弹出对话框的函数主要有三种：alert()、confirm()和prompt()。

1. `alert()`

基础概念：alert()函数用于显示一条警告消息，通常用于向用户显示一些重要信息或者确认操作。

优势：简单易用，可以快速向用户展示信息。

应用场景：当需要用户注意某些信息，或者确认某个操作时，可以使用alert()。

示例代码：

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

2. `confirm()`

基础概念：confirm()函数用于显示一个带有确定和取消按钮的对话框，用户可以选择其中一个选项。

优势：可以获取用户的简单确认或取消操作。

应用场景：当需要用户确认某个操作是否继续时，可以使用confirm()。

示例代码：

if (confirm("你确定要删除这条记录吗？")) {
    // 用户点击了“确定”按钮
    console.log("记录已删除");
} else {
    // 用户点击了“取消”按钮
    console.log("删除操作已取消");
}

3. `prompt()`

基础概念：prompt()函数用于显示一个带有输入框的对话框，用户可以在其中输入文本。

优势：可以获取用户的输入信息。

应用场景：当需要用户输入一些信息时，可以使用prompt()。

示例代码：

let userInput = prompt("请输入你的名字：");
if (userInput !== null) {
    console.log("你好，" + userInput + "！");
} else {
    console.log("用户取消了输入");
}

常见问题及解决方法

问题1：弹出对话框阻塞页面操作

原因：alert()、confirm()和prompt()都是同步操作，会阻塞页面的其他操作，直到用户关闭对话框。

解决方法：尽量避免在频繁交互的场景中使用这些函数，可以考虑使用自定义的非阻塞式对话框。

示例代码（使用HTML和CSS自定义对话框）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Dialog</title>
    <style>
        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
        }
        .dialog-box {
            background: white;
            padding: 20px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="dialog-overlay" id="customDialog">
        <div class="dialog-box">
            <p>这是一个自定义对话框</p>
            <button onclick="closeDialog()">确定</button>
        </div>
    </div>
    <button onclick="openDialog()">打开自定义对话框</button>

    <script>
        function openDialog() {
            document.getElementById('customDialog').style.display = 'flex';
        }

        function closeDialog() {
            document.getElementById('customDialog').style.display = 'none';
        }
    </script>
</body>
</html>

问题2：样式和交互受限

原因：原生的alert()、confirm()和prompt()对话框样式和交互方式有限，不能满足复杂的UI需求。

解决方法：使用自定义的对话框组件，可以通过HTML、CSS和JavaScript来实现更复杂和美观的对话框。

通过以上方法，可以更好地控制对话框的行为和样式，提升用户体验。