HTML弹出框是一种常见的网页交互方式，它可以在用户点击某个按钮或者链接时，弹出一个对话框，用于显示一些信息或者接收用户的输入，在HTML中，我们可以使用JavaScript和CSS来实现弹出框的功能。
HTML弹出框的基本结构
HTML弹出框的基本结构包括三个部分：弹出框的内容（content）、弹出框的标题（title）和弹出框的按钮（buttons），内容部分是弹出框的主体，可以包含文本、图片等元素；标题部分是弹出框的标题，通常用于描述弹出框的用途；按钮部分是弹出框的关闭按钮，用户可以点击它来关闭弹出框。
HTML弹出框的实现方法
在HTML中，我们可以使用JavaScript的alert()函数和confirm()函数来创建简单的弹出框，这两个函数都会创建一个带有确定按钮和一个取消按钮的对话框，用户可以点击这些按钮来关闭对话框。
1、alert()函数
alert()函数会创建一个带有一条消息和一个确定按钮的对话框，当用户点击确定按钮时，对话框会关闭。
<!DOCTYPE html>
<html>
<head>
<script>
function showAlert() {
alert("这是一个警告！");
}
</script>
</head>
<body>
<h2>点击下面的按钮显示警告</h2>
<button onclick="showAlert()">点击我</button>
</body>
</html>
2、confirm()函数
confirm()函数会创建一个带有一条消息、一个确定按钮和一个取消按钮的对话框，当用户点击确定按钮时，对话框会返回true；当用户点击取消按钮时，对话框会返回false。
<!DOCTYPE html>
<html>
<head>
<script>
function showConfirm() {
var result = confirm("你确定要退出吗？");
if (result) {
alert("你点击了确定按钮");
} else {
alert("你点击了取消按钮");
}
}
</script>
</head>
<body>
<h2>点击下面的按钮显示确认对话框</h2>
<button onclick="showConfirm()">点击我</button>
</body>
</html>
HTML弹出框的样式定制
虽然JavaScript和CSS都可以用于定制弹出框的样式，但是JavaScript提供的样式定制能力有限，因此我们通常会使用CSS来定制弹出框的样式，我们可以使用CSS的伪元素：:before和：:after来创建自定义的弹出框标题和内容。
<!DOCTYPE html>
<html>
<head>
<style>
.custom-alert {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: f9f9f9;
border: 1px solid ccc;
padding: 20px;
text-align: center;
}
.custom-alert::before {
content: "";
display: inline-block;
height: 16px;
width: 16px;
margin-right: 10px;
background-image: url('alert-icon.png');
background-size: cover;
}
.custom-alert h2 {
margin-top: 0;
}
.custom-alert p {
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="custom-alert">
<span class="custom-alert__title"></span><br/>
<p></p>
</div>
<script>
function showCustomAlert(title, message) {
document.querySelector('.custom-alert__title').innerText = title;
document.querySelector('.custom-alert p').innerText = message;
}
</script>
</body>
</html>
