警告框是最简单的一种对话框，主要用于向用户显示一条消息。当调用 alert() 方法时，浏览器会弹出一个包含指定消息的对话框，并只有一个“确定”按钮供用户点击。
应用场景
错误提示：当用户操作出错时，可以使用警告框提示用户具体的错误信息。
重要通知：在某些情况下，需要向用户传达重要的信息，如系统维护通知等。
2. 确认框（Confirm）
确认框用于让用户在继续执行某个操作之前进行确认。它通常包含“确定”和“取消”两个按钮，返回值是一个布尔值，表示用户的选择。
if (confirm("你确定要删除这条记录吗？")) { // 用户点击了“确定” console.log("记录已删除"); } else { // 用户点击了“取消” console.log("操作已取消"); }
应用场景
删除操作：在进行删除操作前，使用确认框确保用户不会误删数据。
表单提交：在用户提交表单前，确认是否真的要提交。
3. 提示框（Prompt）
提示框用于提示用户输入一些信息。它包含一个文本输入框、“确定”和“取消”按钮，返回值是用户输入的字符串或 null（如果用户点击了“取消”）。
let userInput = prompt("请输入你的名字：", "默认名字");
if (userInput !== null) {
console.log("你好, " + userInput);
} 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>
#customDialog {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<button onclick="showCustomDialog()">打开自定义对话框</button>
<div id="overlay"></div>
<div id="customDialog">
<p>这是一个自定义对话框</p>
<button onclick="hideCustomDialog()">关闭</button>
</div>
<script>
function showCustomDialog() {
document.getElementById('overlay').style.display = 'block';
document.getElementById('customDialog').style.display = 'block';
}
function hideCustomDialog() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('customDialog').style.display = 'none';
}
</script>
</body>
</html>
在这个示例中，我们创建了一个自定义对话框和一个半透明的覆盖层，当用户点击按钮时，对话框会显示出来。用户可以点击关闭按钮来隐藏对话框
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。