CSS3弹窗表单插件

原创已于 2025-06-27 13:52:11 修改 · 878 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-29 17:56:37 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3弹窗表单插件</title>
<style>
/* 基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
background-color: #f5f5f5;
padding: 20px;
}

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

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}

.btn {
padding: 12px 24px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}

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

/* 弹窗基础样式 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s;
}

.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
max-width: 500px;
position: relative;
}

.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}

.close:hover {
color: black;
}

/* 动画效果 */
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes slideIn {
from {transform: translateY(-50px); opacity: 0;}
to {transform: translateY(0); opacity: 1;}
}

@keyframes zoomIn {
from {transform: scale(0.5); opacity: 0;}
to {transform: scale(1); opacity: 1;}
}

@keyframes bounceIn {
0% {transform: scale(0.5); opacity: 0;}
50% {transform: scale(1.1); opacity: 1;}
100% {transform: scale(1); opacity: 1;}
}

/* 表单样式 */
.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

.form-group input,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}

.form-group textarea {
height: 100px;
resize: vertical;
}

.submit-btn {
width: 100%;
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}

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

/* 样式1 - 淡入淡出 */
.modal-style1 .modal-content {
animation: fadeIn 0.3s;
}

/* 样式2 - 滑动进入 */
.modal-style2 .modal-content {
animation: slideIn 0.4s;
}

/* 样式3 - 缩放进入 */
.modal-style3 .modal-content {
animation: zoomIn 0.4s;
}

/* 样式4 - 弹跳进入 */
.modal-style4 .modal-content {
animation: bounceIn 0.6s;
}

/* 样式1特有 */
.modal-style1 .modal-content {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border: 1px solid #c3cfe2;
}

/* 样式2特有 */
.modal-style2 .modal-content {
background: white;
border-top: 5px solid #4CAF50;
}

/* 样式3特有 */
.modal-style3 .modal-content {
background: #fff;
border-radius: 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* 样式4特有 */
.modal-style4 .modal-content {
background: #f9f9f9;
border: 2px solid #4CAF50;
}

/* 响应式设计 */
@media (max-width: 600px) {
.modal-content {
margin: 20% auto;
width: 90%;
}
}
</style>
</head>
<body>
<h1>CSS3弹窗表单插件</h1>

<div class="container">
<button class="btn" onclick="openModal('modal1')">淡入淡出表单</button>
<button class="btn" onclick="openModal('modal2')">滑动进入表单</button>
<button class="btn" onclick="openModal('modal3')">缩放进入表单</button>
<button class="btn" onclick="openModal('modal4')">弹跳进入表单</button>


</div>


<div id="modal1" class="modal modal-style1">
<div class="modal-content">
<span class="close" onclick="closeModal('modal1')">×</span>
<h2>联系我们</h2>
<form>
<div class="form-group">
<label for="name1">姓名</label>
<input type="text" id="name1" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="email1">邮箱</label>
<input type="email" id="email1" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="message1">留言</label>
<textarea id="message1" placeholder="请输入您的留言"></textarea>
</div>
<button type="submit" class="submit-btn">提交</button>
</form>
</div>
</div>


<div id="modal2" class="modal modal-style2">
<div class="modal-content">
<span class="close" onclick="closeModal('modal2')">×</span>
<h2>用户登录</h2>
<form>
<div class="form-group">
<label for="username2">用户名</label>
<input type="text" id="username2" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password2">密码</label>
<input type="password" id="password2" placeholder="请输入密码">
</div>
<div class="form-group">
<input type="checkbox" id="remember2">
<label for="remember2">记住我</label>
</div>
<button type="submit" class="submit-btn">登录</button>
</form>
</div>
</div>


<div id="modal3" class="modal modal-style3">
<div class="modal-content">
<span class="close" onclick="closeModal('modal3')">×</span>
<h2>订阅我们</h2>
<form>
<div class="form-group">
<label for="email3">邮箱地址</label>
<input type="email" id="email3" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="frequency3">订阅频率</label>
<select id="frequency3" style="width: 100%; padding: 10px;">
<option value="daily">每日</option>
<option value="weekly">每周</option>
<option value="monthly">每月</option>
</select>
</div>
<button type="submit" class="submit-btn">订阅</button>
</form>
</div>
</div>


<div id="modal4" class="modal modal-style4">
<div class="modal-content">
<span class="close" onclick="closeModal('modal4')">×</span>
<h2>反馈表单</h2>
<form>
<div class="form-group">
<label for="name4">姓名</label>
<input type="text" id="name4" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="email4">邮箱</label>
<input type="email" id="email4" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="rating4">评分</label>
<input type="range" id="rating4" min="1" max="5" value="3" style="width: 100%;">
</div>
<div class="form-group">
<label for="feedback4">反馈内容</label>
<textarea id="feedback4" placeholder="请输入您的反馈"></textarea>
</div>
<button type="submit" class="submit-btn">提交反馈</button>
</form>
</div>
</div>

<script>
// 打开弹窗
function openModal(modalId) {
document.getElementById(modalId).style.display = "block";
}

// 关闭弹窗
function closeModal(modalId) {
document.getElementById(modalId).style.display = "none";
}

// 点击弹窗外部关闭弹窗
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}

// 阻止表单提交
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('表单已提交！');
this.closest('.modal').style.display = 'none';
});
});
</script>
</body>
</html>