使用 <dialog> 标签 (现代、简单、推荐)
这是HTML5原生提供的标签,专门用于创建对话框，它是最语义化、最简单的方法，而且自带了显示/隐藏的功能，无需编写复杂的JavaScript。
（图片来源网络，侵删）
优点：
- 语义化好,代码清晰。
- 浏览器原生支持,无需额外库。
- 可以使用
showModal()方法轻松打开，close()方法关闭。
缺点：
- 在一些非常旧的浏览器（如IE11）中可能不被支持。
完整代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Dialog 弹窗示例</title>
<style>
/* 给body设置一些基本样式，让按钮居中 */
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
/* 按钮样式 */
.open-dialog-btn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}
/* dialog 标签的默认样式 */
dialog {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
/* dialog 打开时的背景遮罩样式 */
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
/* 按钮组样式 */
.dialog-buttons button {
margin: 0 10px;
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
}
.confirm-btn {
background-color: #28a745;
color: white;
}
.cancel-btn {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- 触发弹窗的按钮 -->
<button class="open-dialog-btn" onclick="document.getElementById('myDialog').showModal()">
点击打开弹窗
</button>
<!-- 弹窗内容 -->
<dialog id="myDialog">
<h2>这是一个标题</h2>
<p>这是一个使用 HTML5 dialog 标签制作的弹窗。</p>
<div class="dialog-buttons">
<button class="confirm-btn" onclick="document.getElementById('myDialog').close('confirmed')">确认</button>
<button class="cancel-btn" onclick="document.getElementById('myDialog').close('cancelled')">取消</button>
</div>
</dialog>
</body>
</html>
代码解析：
<button onclick="...">: 点击这个按钮时，调用document.getElementById('myDialog').showModal()方法，showModal()会以模态（modal）方式显示弹窗，并自动添加背景遮罩。<dialog id="myDialog">: 这就是弹窗的主体。id属性是必须的，这样JavaScript才能找到它。dialog::backdrop: 这是CSS的一个伪元素，专门用来设置弹窗打开时背景遮罩的样式。onclick="document.getElementById('myDialog').close(...)": 点击弹窗内的“确认”或“取消”按钮时，调用close()方法来关闭弹窗，可以传入一个值，用于判断用户点击的是哪个按钮。
使用 <div> 元素 + CSS + JavaScript (最灵活、兼容性好)
这是最传统、最通用的方法，通过CSS控制div的显示和隐藏，用JavaScript来触发，兼容性最好，几乎在所有浏览器上都能工作。
优点：
- 兼容性极好,支持所有浏览器。
- 灵活性最高,可以实现任何你想要的弹窗效果。
缺点：
- 需要手动编写CSS和JavaScript来控制显示/隐藏。
完整代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Div 弹窗示例</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.open-dialog-btn {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}
/* 弹窗容器 (默认隐藏) */
.modal {
display: none; /* 默认不显示 */
position: fixed; /* 固定定位 */
z-index: 1; /* 确保在最上层 */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto; /* 允许滚动 */
background-color: rgba(0,0,0,0.5); /* 半透明背景 */
}
/* 弹窗内容 */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}
/* 关闭按钮 */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
}
.dialog-buttons button {
margin: 10px 5px;
padding: 8px 16px;
cursor: pointer;
border: none;
border-radius: 4px;
}
.confirm-btn {
background-color: #28a745;
color: white;
}
.cancel-btn {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- 触发弹窗的按钮 -->
<button class="open-dialog-btn" id="myBtn">点击打开弹窗</button>
<!-- 弹窗 (模态框) -->
<div id="myModal" class="modal">
<!-- 弹窗内容 -->
<div class="modal-content">
<span class="close">×</span>
<h2>这是一个标题</h2>
<p>这是一个使用 div 元素制作的弹窗。</p>
<div class="dialog-buttons">
<button class="confirm-btn" id="confirmBtn">确认</button>
<button class="cancel-btn" id="cancelBtn">取消</button>
</div>
</div>
</div>
<script>
// 获取弹窗和按钮的 DOM 元素
const modal = document.getElementById("myModal");
const btn = document.getElementById("myBtn");
const span = document.getElementsByClassName("close")[0];
const confirmBtn = document.getElementById("confirmBtn");
const cancelBtn = document.getElementById("cancelBtn");
// 点击按钮，打开弹窗
btn.onclick = function() {
modal.style.display = "block";
}
// 点击 <span> (x), 关闭弹窗
span.onclick = function() {
modal.style.display = "none";
}
// 点击“取消”按钮，关闭弹窗
cancelBtn.onclick = function() {
modal.style.display = "none";
}
// 点击弹窗外部（背景遮罩），关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
代码解析：
- CSS:
.modal: 使用display: none默认隐藏。position: fixed让它覆盖整个视窗。background-color创建半透明背景遮罩。.modal-content: 这是弹窗的实际内容，通过margin: 15% auto让它在垂直方向上居中。
- JavaScript:
btn.onclick: 将.modal的display属性设置为"block"，使其显示出来。span.onclick和cancelBtn.onclick: 将.modal的display属性设置回"none"，使其隐藏。window.onclick: 这是一个很实用的功能，当用户点击弹窗外的区域（也就是背景遮罩）时，也会关闭弹窗。
总结与选择建议
| 特性 | <dialog>
| |
|---|---|---|
| 易用性 | 非常高，API简单 | 中等，需要手写JS |
| 兼容性 | 较好，不支持IE | 非常好，所有浏览器 |
| 语义化 | 优秀，专为弹窗设计 | 一般，只是一个容器 |
| 灵活性 | 良好 | 极高，完全可控 |
| 遮罩层 | :backdrop 伪元素 |
需要手动创建一个div |
如何选择？
- 如果你不介意不支持IE等非常旧的浏览器，并且希望代码简洁、语义化，强烈推荐使用
<dialog> 这是未来的趋势。 - 如果你的项目需要兼容非常老的浏览器，或者你对弹窗的样式和行为有非常特殊、复杂的需求，那么使用
<div>元素 + CSS + JavaScript 的方法更稳妥、更灵活。
对于初学者来说,方法二（<div>） 是一个很好的起点，因为它能让你更清楚地理解弹窗是如何工作的。
