# 怎么使用HTML5和CSS3制作一個模態框
模態框（Modal）是網頁設計中常見的交互元素，用于在不離開當前頁面的情況下展示重要內容或獲取用戶輸入。本文將詳細介紹如何使用純HTML5和CSS3創建一個響應式模態框。
## 一、HTML結構
首先創建基本的HTML結構，包含觸發按鈕和模態框內容：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模態框示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 觸發按鈕 -->
<button id="modalBtn" class="btn">打開模態框</button>
<!-- 模態框容器 -->
<div id="simpleModal" class="modal">
<!-- 模態框內容 -->
<div class="modal-content">
<div class="modal-header">
<span class="closeBtn">×</span>
<h2>模態框標題</h2>
</div>
<div class="modal-body">
<p>這里是模態框的內容...</p>
<p>可以包含文字、表單或其他HTML元素。</p>
</div>
<div class="modal-footer">
<button class="btn">確認</button>
<button class="btn">取消</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
使用CSS3實現模態框的視覺效果和動畫：
/* 基礎樣式 */
.btn {
padding: 10px 20px;
background: #4285f4;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
/* 模態框容器 - 默認隱藏 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
animation: fadeIn 0.3s;
}
/* 模態框內容 */
.modal-content {
position: relative;
background-color: #fefefe;
margin: 10% auto; /* 距離頂部10% */
padding: 0;
width: 80%;
max-width: 600px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
border-radius: 8px;
overflow: hidden;
}
/* 模態框各部分樣式 */
.modal-header, .modal-footer {
padding: 15px;
background: #4285f4;
color: white;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-body {
padding: 20px;
}
.closeBtn {
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
/* 動畫效果 */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
/* 響應式設計 */
@media (max-width: 768px) {
.modal-content {
width: 95%;
margin: 20% auto;
}
}
雖然本文聚焦HTML/CSS，但需要少量JavaScript實現開關功能：
// 獲取DOM元素
const modal = document.getElementById('simpleModal');
const modalBtn = document.getElementById('modalBtn');
const closeBtn = document.querySelector('.closeBtn');
// 打開模態框
modalBtn.addEventListener('click', () => {
modal.style.display = 'block';
});
// 關閉模態框
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
// 點擊模態框外部關閉
window.addEventListener('click', (e) => {
if(e.target === modal) {
modal.style.display = 'none';
}
});
.modal-content {
transition: all 0.3s ease-out;
transform: translateY(-50px);
opacity: 0;
}
.modal.show .modal-content {
transform: translateY(0);
opacity: 1;
}
<div id="simpleModal" class="modal" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<h2 id="modalTitle">模態框標題</h2>
:root {
--primary-color: #4285f4;
--modal-width: 600px;
}
.modal-content {
width: var(--modal-width);
background: var(--primary-color);
}
通過HTML5和CSS3的組合，我們創建了一個具有以下特點的模態框： - 響應式設計，適配不同屏幕尺寸 - 平滑的動畫過渡效果 - 半透明背景遮罩層 - 自定義的頭部、主體和底部區域 - 可通過點擊外部或關閉按鈕關閉
這種純前端實現方式無需依賴任何JavaScript庫，性能高效且易于定制。開發者可以根據項目需求進一步擴展功能，如表單驗證、動態內容加載等。 “`
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
