1. alert 弹窗
alert 方法用于显示一个包含文本消息和确定按钮的简单对话框。
alert('Hello, World!');
2. confirm 弹窗
confirm 方法用于显示包含文本消息、确定按钮和取消按钮的对话框，返回用户的确认状态（true 或 false）。
let result = confirm('Do you want to proceed?');
if (result) {
// 用户点击了确定按钮
console.log('User clicked OK.');
} else {
// 用户点击了取消按钮
console.log('User clicked Cancel.');
}
3. prompt 弹窗
prompt 方法用于显示包含文本消息、文本输入框、确定按钮和取消按钮的对话框，返回用户输入的文本或 null。
let userInput = prompt('Please enter your name:', 'John Doe');
if (userInput !== null) {
// 用户点击了确定按钮，并输入了文本
console.log('User entered:', userInput);
} else {
// 用户点击了取消按钮
console.log('User clicked Cancel.');
}
4. 自定义弹窗
除了上述内建的 alert、confirm 和 prompt 方法，你还可以使用 HTML、CSS 和 JavaScript 来创建自定义的弹窗。这通常包括在页面中创建一个遮罩层和弹窗元素，并通过 JavaScript 控制其显示和隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 遮罩层样式 */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
/* 弹窗样式 */
.modal {
background-color: #fff;
padding: 20px;
border-radius: 8px;
}
</style>
</head>
<body>
<button onclick="openCustomModal()">Open Custom Modal</button>
<!-- 遮罩层和弹窗 -->
<div id="customOverlay" class="overlay">
<div id="customModal" class="modal">
<p>Hello, this is a custom modal!</p>
<button onclick="closeCustomModal()">Close</button>
</div>
</div>
<script>
function openCustomModal() {
document.getElementById('customOverlay').style.display = 'flex';
}
function closeCustomModal() {
document.getElementById('customOverlay').style.display = 'none';
}
</script>
</body>
</html>
以上示例演示了如何使用自定义 HTML、CSS 和 JavaScript 来创建一个简单的自定义弹窗。通过控制遮罩层的显示和隐藏，可以模拟弹窗的效果。
无论使用哪种方式，弹窗是在 Web 开发中常用的用户交互元素，可以用于显示信息、确认操作或收集用户输入。
转载请注明出处：http://www.zyzy.cn/article/detail/3569/JavaScript