js 询问对话框

在JavaScript中，询问对话框通常是通过alert()、confirm()和prompt()函数来实现的。

基础概念：

alert()：显示一条消息和一个“确定”按钮。
confirm()：显示一条消息以及“确定”和“取消”按钮，返回一个布尔值。
prompt()：显示一条消息、一个输入框以及“确定”和“取消”按钮，可以获取用户的输入。

相关优势：

简单易用，能快速向用户展示信息或获取简单输入。
不需要额外的库或复杂的代码。

应用场景：

alert()常用于显示错误消息、警告或重要通知。
confirm()适用于需要用户确认某个操作的情况，比如删除文件。
prompt()适合获取用户的简短输入，如用户名或密码。

示例代码：

// 使用alert()显示消息
alert("这是一个警告消息！");

// 使用confirm()获取用户确认
if (confirm("你确定要删除这个文件吗？")) {
    // 用户点击了“确定”
    console.log("文件已删除");
} else {
    // 用户点击了“取消”
    console.log("删除操作已取消");
}

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

常见问题及解决方法：

对话框阻塞：JavaScript中的这些对话框是同步的，会阻塞页面的其他交互直到用户响应。解决方法是使用自定义的非阻塞性对话框，可以通过HTML、CSS和JavaScript来实现。
样式单一：浏览器提供的对话框样式有限。可以通过自定义样式来改善用户体验，使用CSS和JavaScript创建更美观和功能丰富的对话框。
移动设备适配：在移动设备上，原生的对话框可能显示不佳或不符合预期。可以通过媒体查询和响应式设计来优化移动设备上的显示效果。

自定义对话框示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
}
.dialog-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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 = 'block';
}
function closeDialog() {
    document.getElementById('customDialog').style.display = 'none';
}
</script>

</body>
</html>

以上代码展示了如何创建一个简单的自定义对话框，通过CSS控制样式，JavaScript控制显示和隐藏。这种方式可以提供更好的用户体验和更高的灵活性。