模态窗口（弹出）
点击显示弹出窗口的基本模板
👀 示例演示
👇 点击下方按钮 👇
💡 此模板的用途与优势
- ユーザーへの通知・注意喚起・確認ダイアログに便利
- 也可用于图片放大显示或表单展示
- 无需跳转页面即可完成信息展示，提升用户体验
- 易于通过样式调整实现现代化设计
- 使用暗背景可突出重点内容
📋 可复制粘贴的代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态窗口</title>
<style>
/* 模态背景 */
.modal-overlay {
display: none; /* 初始状态下隐藏 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
z-index: 1000; /* 确保模态窗口显示在其他元素的前面 */
}
/* 模态窗口 */
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中 */
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
/* 关闭按钮 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
/* 按钮样式 */
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<section>
<h2>👀 演示</h2>
<div style="text-align: center; font-size: 1.7rem; margin: 1rem 0;">👇 点击下面的按钮 👇</div>
<button onclick="openModal()">打开模态窗口</button>
<!-- 模态窗口的背景 -->
<div class="modal-overlay" id="modal">
<div class="modal">
<button class="close-btn" onclick="closeModal()">×</button>
<h3>通知</h3>
<p>这是一个模态窗口。点击外部区域或 × 按钮可以关闭。</p>
</div>
</div>
</section>
<script>
// 打开模态窗口的函数
function openModal() {
document.getElementById('modal').style.display = 'block'; // 显示模态窗口
}
// 关闭模态窗口的函数
function closeModal() {
document.getElementById('modal').style.display = 'none'; // 隐藏模态窗口
}
// 点击外部区域也能关闭模态窗口
document.querySelector('.modal-overlay').addEventListener('click', function(event) {
if (event.target === document.querySelector('.modal-overlay')) {
closeModal();
}
});
</script>
</body>
</html>
🧩 應用與實用範例
模態視窗（Modal）是一種非常有效的方式，可在不跳轉頁面的情況下顯示重要訊息。透過 onclick 事件來開啟或關閉模態視窗，是現代網站中常見的互動設計手法。
例如，可用於放大顯示圖片、彈出聯絡表單、提示確認訊息等，僅需執行 document.getElementById("modal").style.display = "flex" 即可顯示模態視窗並加上半透明背景。
關閉視窗則透過 closeModal() 函式，將 style.display 設為 "none"，讓使用者操作更直覺，也方便程式碼維護。
如需進一步提升使用體驗，還可加入點擊背景區域或按下 Esc 鍵時自動關閉的功能，這些都是初學者練習 JavaScript 事件處理與 DOM 操作的良好入門範例。