现代Web应用中的模态框设计与实现，提供沉浸式的用户交互体验
📋 章节概述
全屏模态框是现代Web应用中不可或缺的UI组件，它能够在不离开当前页面的情况下，为用户提供专注的交互环境。从简单的确认对话框到复杂的表单填写，从图片预览到视频播放，模态框承载着丰富的功能需求。本章将深入探讨如何设计和实现各种类型的响应式模态框，确保在所有设备上都能提供优秀的用户体验。
🎯 学习目标
通过本章学习，你将掌握：
模态框的设计原则和最佳实践
CSS和JavaScript实现模态框的核心技术
响应式模态框的布局适配策略
模态框的无障碍访问优化
各种类型模态框的实现方案
示例
💻 核心代码实现
通过网盘分享的文件：08-fullscreen-modal 链接: https://pan.baidu.com/s/1dnIDB-bc8UFpqPgHYtmzPw?pwd=9pwu 提取码: 9pwu --来自百度网盘超级会员v6的分享
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="style.css">
</head>
<body>
<!-- 基础模态框 -->
<div class="modal" id="basic-modal" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container">
<div class="modal-header">
<h2 id="modal-title" class="modal-title">基础模态框</h2>
<button class="modal-close" data-close-modal aria-label="关闭模态框">
<span class="close-icon">×</span>
</button>
</div>
<div class="modal-body">
<p>这是一个基础的模态框示例。模态框可以用来显示重要信息、确认操作或收集用户输入。</p>
<div class="modal-features">
<div class="feature-item">
<span class="feature-icon">✨</span>
<span>优雅的动画效果</span>
</div>
<div class="feature-item">
<span class="feature-icon">📱</span>
<span>响应式设计</span>
</div>
<div class="feature-item">
<span class="feature-icon">♿</span>
<span>无障碍访问</span>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-close-modal>取消</button>
<button class="btn btn-primary">确认</button>
</div>
</div>
</div>
<!-- 表单模态框 -->
<div class="modal" id="form-modal" role="dialog" aria-labelledby="form-modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container modal-large">
<div class="modal-header">
<h2 id="form-modal-title" class="modal-title">用户注册</h2>
<button class="modal-close" data-close-modal aria-label="关闭模态框">
<span class="close-icon">×</span>
</button>
</div>
<div class="modal-body">
<form class="modal-form" id="registration-form">
<div class="form-row">
<div class="form-group">
<label for="firstName">名字</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">姓氏</label>
<input type="text" id="lastName" name="lastName" required>
</div>
</div>
<div class="form-group">
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<div class="password-strength">
<div class="strength-bar">
<div class="strength-fill"></div>
</div>
<span class="strength-text">密码强度：弱</span>
</div>
</div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" id="confirmPassword" name="confirmPassword" required>
</div>
<div class="form-group">
<label for="phone">手机号码</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="birthDate">出生日期</label>
<input type="date" id="birthDate" name="birthDate">
</div>
<div class="form-group">
<label for="gender">性别</label>
<select id="gender" name="gender">
<option value="">请选择</option>
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="newsletter" name="newsletter">
<span class="checkmark"></span>
<span class="checkbox-text">订阅我们的新闻通讯</span>
</label>
</div>
<div class="form-group checkbox-group">
<label class="checkbox-label">
<input type="checkbox" id="terms" name="terms" required>
<span class="checkmark"></span>
<span class="checkbox-text">我同意 <a href="#" class="terms-link">服务条款</a> 和 <a href="#" class="privacy-link">隐私政策</a></span>
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-close-modal>取消</button>
<button class="btn btn-primary" type="submit" form="registration-form">注册账户</button>
</div>
</div>
</div>
<!-- 图片预览模态框 -->
<div class="modal modal-fullscreen" id="image-modal" role="dialog" aria-labelledby="image-modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container">
<div class="modal-header">
<h2 id="image-modal-title" class="modal-title">图片预览</h2>
<div class="modal-controls">
<button class="control-btn" id="zoom-out" aria-label="缩小">🔍-</button>
<button class="control-btn" id="zoom-in" aria-label="放大">🔍+</button>
<button class="control-btn" id="rotate" aria-label="旋转">🔄</button>
<button class="control-btn" id="download" aria-label="下载">📥</button>
</div>
<button class="modal-close" data-close-modal aria-label="关闭模态框">
<span class="close-icon">×</span>
</button>
</div>
<div class="modal-body image-viewer">
<div class="image-container">
<img id="preview-image" src="" alt="预览图片" class="preview-image">
<div class="image-loading">
<div class="loading-spinner"></div>
<p>加载中...</p>
</div>
</div>
<div class="image-navigation">
<button class="nav-btn prev-btn" id="prev-image" aria-label="上一张">‹</button>
<button class="nav-btn next-btn" id="next-image" aria-label="下一张">›</button>
</div>
</div>
<div class="modal-footer">
<div class="image-info">
<span class="image-name">image.jpg</span>
<span class="image-size">1920 × 1080</span>
<span class="image-counter">1 / 5</span>
</div>
</div>
</div>
</div>
<!-- 视频播放模态框 -->
<div class="modal modal-fullscreen" id="video-modal" role="dialog" aria-labelledby="video-modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container">
<div class="modal-header">
<h2 id="video-modal-title" class="modal-title">视频播放</h2>
<button class="modal-close" data-close-modal aria-label="关闭模态框">
<span class="close-icon">×</span>
</button>
</div>
<div class="modal-body video-player">
<div class="video-container">
<video id="modal-video" controls preload="metadata">
<source src="https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
</div>
</div>
</div>
</div>
<!-- 确认对话框 -->
<div class="modal modal-small" id="confirm-modal" role="dialog" aria-labelledby="confirm-modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-icon warning-icon">⚠️</div>
<h2 id="confirm-modal-title" class="modal-title">确认操作</h2>
</div>
<div class="modal-body">
<p class="confirm-message">您确定要删除这个项目吗？此操作无法撤销。</p>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-close-modal>取消</button>
<button class="btn btn-danger" id="confirm-action">删除</button>
</div>
</div>
</div>
<!-- 成功提示模态框 -->
<div class="modal modal-small" id="success-modal" role="dialog" aria-labelledby="success-modal-title" aria-hidden="true">
<div class="modal-overlay" data-close-modal></div>
<div class="modal-container">
<div class="modal-header">
<div class="modal-icon success-icon">✅</div>
<h2 id="success-modal-title" class="modal-title">操作成功</h2>
</div>
<div class="modal-body">
<p class="success-message">您的操作已成功完成！</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-close-modal>确定</button>
</div>
</div>
</div>
<!-- 主要内容区域 -->
<main class="main-content">
<div class="container">
<header class="page-header">
<h1>全屏模态框演示</h1>
<p class="page-subtitle">体验各种类型的现代模态框设计</p>
</header>
<section class="demo-section">
<h2>模态框类型</h2>
<div class="demo-grid">
<div class="demo-card">
<div class="demo-icon">💬</div>
<h3>基础模态框</h3>
<p>简单的信息展示和用户确认</p>
<button class="btn btn-primary" data-modal="basic-modal">打开模态框</button>
</div>
<div class="demo-card">
<div class="demo-icon">📝</div>
<h3>表单模态框</h3>
<p>复杂表单的输入和验证</p>
<button class="btn btn-primary" data-modal="form-modal">注册用户</button>
</div>
<div class="demo-card">
<div class="demo-icon">🖼️</div>
<h3>图片预览</h3>
<p>全屏图片查看和操作</p>
<div class="image-gallery">
<img src="https://picsum.photos/300/200?random=1" alt="示例图片1" class="gallery-image" data-modal="image-modal">
<img src="https://picsum.photos/300/200?random=2" alt="示例图片2" class="gallery-image" data-modal="image-modal">
<img src="https://picsum.photos/300/200?random=3" alt="示例图片3" class="gallery-image" data-modal="image-modal">
</div>
</div>
<div class="demo-card">
<div class="demo-icon">🎥</div>
<h3>视频播放</h3>
<p>全屏视频播放体验</p>
<button class="btn btn-primary" data-modal="video-modal">播放视频</button>
</div>
<div class="demo-card">
<div class="demo-icon">⚠️</div>
<h3>确认对话框</h3>
<p>重要操作的确认提示</p>
<button class="btn btn-danger" data-modal="confirm-modal">删除项目</button>
</div>
<div class="demo-card">
<div class="demo-icon">✅</div>
<h3>成功提示</h3>
<p>操作完成的反馈信息</p>
<button class="btn btn-success" data-modal="success-modal">显示成功</button>
</div>
</div>
</section>
<section class="features-section">
<h2>模态框特性</h2>
<div class="features-grid">
<div class="feature-item">
<div class="feature-icon">📱</div>
<h4>响应式设计</h4>
<p>在所有设备上都能完美显示，自动适配屏幕尺寸</p>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<h4>流畅动画</h4>
<p>优雅的进入和退出动画，提升用户体验</p>
</div>
<div class="feature-item">
<div class="feature-icon">♿</div>
<h4>无障碍访问</h4>
<p>支持键盘导航和屏幕阅读器</p>
</div>
<div class="feature-item">
<div class="feature-icon">🎨</div>
<h4>自定义样式</h4>
<p>灵活的样式配置，适应不同设计需求</p>
</div>
</div>
</section>
</div>
</main>
<script src="script.js"></script>
</body>
</html>CSS样式
/* 基础重置和变量 */
:root {
--primary-color: #3b82f6;
--secondary-color: #6b7280;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--dark-color: #1f2937;
--light-color: #f8fafc;
--gray-color: #6b7280;
--border-color: #e5e7eb;
--white: #ffffff;
--font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 4rem;