JavaScript 提供了几种用于显示弹窗（对话框）的内置方法，通常用于与用户进行交互、显示信息或要求用户做出某种响应。主要的弹窗方法包括 alert()、confirm() 和 prompt()。它们都属于 window 对象的一部分。
1. alert() 方法
alert() 是最简单的弹窗方法，用于显示一个包含消息和“确定”按钮的警告框。该方法没有返回值，用户点击确定按钮后，弹窗会自动关闭。
用法：
alert("This is an alert message!");效果：
弹出一个对话框，内容为 “This is an alert message!”，并且有一个“确定”按钮。
用途：
- 用于向用户显示警告信息。
- 用于调试，暂时性地显示信息。
2. confirm() 方法
confirm() 弹窗会显示一个包含消息、”确定” 和 “取消” 按钮的对话框。该方法返回一个布尔值：如果用户点击“确定”按钮，则返回 true；如果点击“取消”按钮，则返回 false。
用法：
var result = confirm("Are you sure you want to proceed?");
if (result) {
console.log("User clicked OK");
} else {
console.log("User clicked Cancel");
}效果：
弹出一个对话框，内容为 “Are you sure you want to proceed?”，并且有两个按钮：“确定”和“取消”。
用途：
- 用于要求用户确认某个操作，类似于确认删除、确认提交等操作。
3. prompt() 方法
prompt() 弹窗允许用户输入信息并返回该输入值。该方法显示一个包含消息、输入框和“确定”和“取消”按钮的对话框。如果用户点击“确定”按钮，返回输入的文本；如果点击“取消”按钮，返回 null。
用法：
var name = prompt("What is your name?", "John Doe");
if (name != null) {
console.log("Hello, " + name);
} else {
console.log("User canceled the input");
}效果：
弹出一个对话框，内容为 “What is your name?”，并且有一个输入框。默认值是 “John Doe”（可以修改），用户可以输入自己的名字或点击“取消”。
用途：
- 用于获取用户的输入信息。
- 用于收集用户的动态输入，例如用户名、搜索内容等。
4. 自定义弹窗
除了使用 alert()、confirm() 和 prompt()，你还可以通过 CSS 和 JavaScript 创建自定义的弹窗（模态框）。这种方法提供了更多的控制，允许你更精确地定义弹窗的外观和行为。下面是一个简单的模态框实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Modal</title>
<style>
/* 弹窗的背景 */
.modal {
display: none; /* 默认不显示 */
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4); /* 半透明背景 */
}
/* 弹窗的内容 */
.modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* 关闭按钮 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Custom Modal Example</h2>
<!-- 触发按钮 -->
<button id="myBtn">Open Modal</button>
<!-- 弹窗 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>This is a custom modal popup!</p>
</div>
</div>
<script>
// 获取弹窗和按钮元素
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
// 点击按钮时打开弹窗
btn.onclick = function() {
modal.style.display = "block";
}
// 点击关闭按钮时关闭弹窗
span.onclick = function() {
modal.style.display = "none";
}
// 点击弹窗外部时关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>效果：
点击 “Open Modal” 按钮时，会弹出一个自定义的模态框，模态框中显示 “This is a custom modal popup!”。用户可以点击右上角的关闭按钮（×）或点击弹窗外部区域关闭弹窗。
用途：
- 用于显示重要信息、表单或进行用户确认操作。
- 提供更多定制化的界面和交互。
5. 总结
alert()：显示一个简单的提示框，只包含一个“确定”按钮。confirm()：显示一个确认框，包含“确定”和“取消”按钮，返回用户选择的布尔值。prompt()：显示一个输入框，允许用户输入信息并返回输入的值。- 自定义弹窗：使用 HTML、CSS 和 JavaScript 创建更为复杂和定制的弹窗。
JavaScript 提供了多种类型的弹窗，它们在网页交互中扮演着重要角色，可以帮助开发者与用户进行有效的沟通和互动。更多详细内容请关注其他相关文章。