jQuery模态框
创建可自定义的模态对话框，包含遮罩层、关闭按钮和动画效果。 · 难度：入门 · +15XP
jQuery模态框
模态框（Modal）是一种覆盖在主内容上的弹窗，用于显示重要信息、登录表单或确认操作。jQuery可以轻松实现其显示、隐藏和动画。
结构
模态框通常包含：遮罩层（overlay）、内容容器、关闭按钮和标题。通过CSS控制初始隐藏，jQuery控制显示/隐藏。
实现逻辑
$('#openBtn').click(function() {
$('#modal').fadeIn();
$('#overlay').fadeIn();
});
$('#closeBtn, #overlay').click(function() {
$('#modal, #overlay').fadeOut();
});样式建议
| 元素 | CSS属性 |
|---|---|
| 遮罩层 | position:fixed; background:rgba(0,0,0,0.5); |
| 模态框 | position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); |
练习提示
在右侧代码中，添加一个淡入淡出的切换效果，并尝试修改动画速度为慢速。