jQuery弹出框效果实例

ziblog

已于 2025-06-27 14:58:53 修改

阅读量519

点赞数 17

CC 4.0 BY-SA版权

文章标签： javascript 前端

于 2025-05-14 13:39:30 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147952506

<!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>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
margin: 0;
padding: 20px;
line-height: 1.6;
background-color: #f5f5f5;
}

.container {
max-width: 800px;
margin: 30px auto;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}

.btn {
display: inline-block;
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #45a049;
}

/* 弹出框遮罩层样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 1000;
}

/* 弹出框样式 */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
width: 80%;
max-width: 500px;
display: none;
z-index: 1001;
animation: modalFadeIn 0.3s;
}

/* 弹出框动画 */
@keyframes modalFadeIn {
from {
opacity: 0;
transform: translate(-50%, -60%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}

.modal-header {
padding-bottom: 15px;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
}

.modal-title {
margin: 0;
color: #333;
}

.modal-body {
margin-bottom: 20px;
color: #555;
}

.modal-footer {
text-align: right;
padding-top: 15px;
border-top: 1px solid #eee;
}

.close-btn {
padding: 8px 16px;
background-color: #f44336;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.close-btn:hover {
background-color: #d32f2f;
}

/* 响应式设计 */
@media (max-width: 600px) {
.modal {
width: 90%;
}

.btn {
display: block;
width: 100%;
margin: 10px 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery弹出框效果实例</h1>

<p>这个示例演示了如何使用jQuery实现简单的弹出框效果。</p>

<div class="btn-group">
<button id="showModal1" class="btn">显示基本弹出框</button>
<button id="showModal2" class="btn">显示带标题的弹出框</button>
<button id="showModal3" class="btn">显示自定义内容弹出框</button>
</div>

<p>弹出框是网页中常用的交互组件，可以用来显示提示信息、确认操作或展示额外内容。</p>
</div>


<div class="modal-overlay" id="modalOverlay"></div>

<div class="modal" id="basicModal">
<div class="modal-body">
<p>这是一个基本的弹出框内容。</p>
<p>点击外部或关闭按钮可以关闭弹出框。</p>
</div>
<div class="modal-footer">
<button class="close-btn" id="closeBasicModal">关闭</button>
</div>
</div>


<div class="modal" id="titleModal">
<div class="modal-header">
<h3 class="modal-title">提示信息</h3>
</div>
<div class="modal-body">
<p>这是一个带有标题的弹出框。</p>
<p>您可以在这里放置重要的提示信息。</p>
</div>
<div class="modal-footer">
<button class="close-btn" id="closeTitleModal">确定</button>
</div>
</div>


<div class="modal" id="customModal">
<div class="modal-header">
<h3 class="modal-title">欢迎访问</h3>
</div>
<div class="modal-body">
<p>感谢您使用我们的弹出框组件！</p>
<p>这里可以放置任何自定义HTML内容，如图片、表单等。</p>
<div style="text-align: center; margin: 15px 0;">
<img src="https://via.placeholder.com/150" alt="示例图片" style="max-width: 100%;">
</div>
</div>
<div class="modal-footer">
<button class="close-btn" id="closeCustomModal">关闭</button>
<button class="btn" id="confirmCustomModal" style="margin-left: 10px;">确认</button>
</div>
</div>

<script>
$(document).ready(function() {
// 1. 基本弹出框控制
$('#showModal1').click(function() {
$('#modalOverlay').fadeIn(200);
$('#basicModal').fadeIn(200);
});

$('#closeBasicModal, #modalOverlay').click(function() {
$('#basicModal').fadeOut(200);
$('#modalOverlay').fadeOut(200);
});

// 阻止点击弹出框内容时关闭
$('#basicModal').click(function(e) {
e.stopPropagation();
});

// 2. 带标题的弹出框控制
$('#showModal2').click(function() {
$('#modalOverlay').fadeIn(200);
$('#titleModal').fadeIn(200);
});

$('#closeTitleModal').click(function() {
$('#titleModal').fadeOut(200);
$('#modalOverlay').fadeOut(200);
});

$('#titleModal').click(function(e) {
e.stopPropagation();
});

// 3. 自定义内容弹出框控制
$('#showModal3').click(function() {
$('#modalOverlay').fadeIn(200);
$('#customModal').fadeIn(200);
});

$('#closeCustomModal, #modalOverlay').click(function() {
$('#customModal').fadeOut(200);
$('#modalOverlay').fadeOut(200);
});

$('#confirmCustomModal').click(function() {
alert('您点击了确认按钮！');
$('#customModal').fadeOut(200);
$('#modalOverlay').fadeOut(200);
});

$('#customModal').click(function(e) {
e.stopPropagation();
});

// ESC键关闭所有弹出框
$(document).keyup(function(e) {
if (e.key === "Escape") {
$('.modal').fadeOut(200);
$('#modalOverlay').fadeOut(200);
}
});

// 控制台输出信息
console.log('弹出框功能已初始化');
});
</script>
</body>
</html>