jQuery点击按钮弹出窗口动画特效

原创已于 2025-06-27 10:52:18 修改 · 537 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-23 14:41:19 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery点击按钮弹出窗口动画特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
font-family: 'Arial', sans-serif;
}

.container {
text-align: center;
}

.btn {
padding: 12px 24px;
background: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin: 10px;
}

.btn:hover {
background: #2980b9;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 弹窗遮罩 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

/* 弹窗内容 */
.modal-content {
background: white;
padding: 30px;
border-radius: 8px;
max-width: 500px;
width: 90%;
position: relative;
transform: scale(0.7);
opacity: 0;
transition: all 0.3s ease-out;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

/* 显示弹窗时的状态 */
.modal-overlay.active {
display: flex;
}

.modal-overlay.active .modal-content {
transform: scale(1);
opacity: 1;
}

/* 弹窗关闭按钮 */
.close-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background: #ff4757;
color: white;
border: none;
border-radius: 50%;
font-size: 16px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}

.close-btn:hover {
background: #ff6b81;
transform: rotate(90deg);
}

/* 弹窗标题 */
.modal-title {
font-size: 24px;
margin-bottom: 15px;
color: #333;
}

/* 弹窗内容 */
.modal-body {
margin-bottom: 20px;
color: #555;
line-height: 1.6;
}

/* 弹窗底部按钮 */
.modal-footer {
display: flex;
justify-content: center;
gap: 10px;
}

.modal-footer .btn {
margin: 0;
}

/* 不同动画效果的弹窗 */
.slide-in .modal-content {
transform: translateY(100px);
}

.slide-in.active .modal-content {
transform: translateY(0);
}

.rotate-in .modal-content {
transform: rotateX(90deg) scale(0.7);
}

.rotate-in.active .modal-content {
transform: rotateX(0) scale(1);
}

.bounce-in .modal-content {
animation: none; /* 由jQuery控制 */
}

/* 标题样式 */
.title {
margin-bottom: 30px;
color: #333;
font-size: 28px;
}

/* 引用链接 */
.credit {
position: fixed;
bottom: 20px;
color: #666;
font-size: 14px;
}

.credit a {
color: #3498db;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">jQuery点击按钮弹出窗口动画特效</h1>

<button class="btn" id="fade-modal-btn">淡入淡出弹窗</button>
<button class="btn" id="slide-modal-btn">滑动弹窗</button>
<button class="btn" id="rotate-modal-btn">旋转弹窗</button>
<button class="btn" id="bounce-modal-btn">弹性弹窗</button>
</div>


<div class="modal-overlay" id="fade-modal">
<div class="modal-content">
<button class="close-btn">×</button>
<h3 class="modal-title">淡入淡出弹窗</h3>
<div class="modal-body">
<p>这是一个使用jQuery实现的淡入淡出动画效果的弹窗。</p>
<p>点击关闭按钮或弹窗外部可以关闭弹窗。</p>
</div>
<div class="modal-footer">
<button class="btn confirm-btn">确定</button>
<button class="btn cancel-btn">取消</button>
</div>
</div>
</div>


<div class="modal-overlay slide-in" id="slide-modal">
<div class="modal-content">
<button class="close-btn">×</button>
<h3 class="modal-title">滑动弹窗</h3>
<div class="modal-body">
<p>这是一个从下方滑入的弹窗效果。</p>
<p>使用了CSS transform实现滑动动画。</p>
</div>
<div class="modal-footer">
<button class="btn confirm-btn">确定</button>
<button class="btn cancel-btn">取消</button>
</div>
</div>
</div>


<div class="modal-overlay rotate-in" id="rotate-modal">
<div class="modal-content">
<button class="close-btn">×</button>
<h3 class="modal-title">旋转弹窗</h3>
<div class="modal-body">
<p>这是一个带有3D旋转效果的弹窗。</p>
<p>使用了CSS transform的rotateX属性。</p>
</div>
<div class="modal-footer">
<button class="btn confirm-btn">确定</button>
<button class="btn cancel-btn">取消</button>
</div>
</div>
</div>


<div class="modal-overlay bounce-in" id="bounce-modal">
<div class="modal-content">
<button class="close-btn">×</button>
<h3 class="modal-title">弹性弹窗</h3>
<div class="modal-body">
<p>这是一个带有弹性动画效果的弹窗。</p>
<p>使用jQuery的animate函数实现弹性效果。</p>
</div>
<div class="modal-footer">
<button class="btn confirm-btn">确定</button>
<button class="btn cancel-btn">取消</button>
</div>
</div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 淡入淡出弹窗
$("#fade-modal-btn").click(function() {
$("#fade-modal").addClass("active");
});

// 滑动弹窗
$("#slide-modal-btn").click(function() {
$("#slide-modal").addClass("active");
});

// 旋转弹窗
$("#rotate-modal-btn").click(function() {
$("#rotate-modal").addClass("active");
});

// 弹性弹窗
$("#bounce-modal-btn").click(function() {
const $modal = $("#bounce-modal");
const $content = $modal.find(".modal-content");

$modal.addClass("active");

// 重置样式
$content.css({
transform: "scale(0.7)",
opacity: 0
});

// 弹性动画
$content.animate({
opacity: 1,
scale: 1.1 // 使用jQuery UI支持scale属性
}, 200, function() {
$(this).animate({
scale: 0.9
}, 100, function() {
$(this).animate({
scale: 1
}, 100);
});
});
});

// 关闭弹窗 - 点击关闭按钮
$(".close-btn, .cancel-btn").click(function() {
$(this).closest(".modal-overlay").removeClass("active");
});

// 关闭弹窗 - 点击遮罩层
$(".modal-overlay").click(function(e) {
if ($(e.target).hasClass("modal-overlay")) {
$(this).removeClass("active");
}
});

// 确定按钮点击事件
$(".confirm-btn").click(function() {
alert("您点击了确定按钮！");
$(this).closest(".modal-overlay").removeClass("active");
});

// 按ESC键关闭弹窗
$(document).keyup(function(e) {
if (e.key === "Escape") {
$(".modal-overlay.active").removeClass("active");
}
});
});
</script>
</body>
</html>