我来为您创建一个功能丰富的网页对话框数据效果页面，这个页面将展示多种对话框样式和交互效果，包括模态框、侧边栏、通知提示等。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">网页对话框数据效果展示</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 自定义动画 */
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.slide-in {
animation: slideIn 0.3s ease-out;
}
.fade-in {
animation: fadeIn 0.3s ease-out;
}
.slide-up {
animation: slideUp 0.3s ease-out;
}
/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 模态框背景 */
.modal-backdrop {
backdrop-filter: blur(5px);
}
/* 数据表格样式 */
.data-table {
border-collapse: collapse;
width: 100%;
}
.data-table th {
background-color: #f3f4f6;
font-weight: 600;
text-align: left;
padding: 12px;
border-bottom: 2px solid #e5e7eb;
}
.data-table td {
padding: 12px;
border-bottom: 1px solid #e5e7eb;
}
.data-table tr:hover {
background-color: #f9fafb;
}
/* 进度条动画 */
@keyframes progress {
from {
width: 0%;
}
}
.progress-bar {
animation: progress 2s ease-out;
}
</style>
</head>
<body class="bg-gray-50">
<!-- 头部导航 -->
<header class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<h1 class="text-2xl font-bold text-gray-800">
<i class="fas fa-window-maximize mr-2 text-blue-600"></i>
对话框数据效果展示
</h1>
<div class="flex items-center space-x-4">
<span class="text-sm text-gray-600">2025年1月</span>
<button class="p-2 rounded-lg hover:bg-gray-100 transition">
<i class="fas fa-cog text-gray-600"></i>
</button>
</div>
</div>
</div>
</header>
<!-- 主要内容区域 -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- 控制面板 -->
<section class="mb-8">
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-lg font-semibold mb-4">对话框类型</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<button onclick="showModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
<i class="fas fa-window-restore mr-2"></i>模态框
</button>
<button onclick="showSidebar()" class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">
<i class="fas fa-bars mr-2"></i>侧边栏
</button>
<button onclick="showNotification()" class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
<i class="fas fa-bell mr-2"></i>通知提示
</button>
<button onclick="showConfirm()" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition">
<i class="fas fa-exclamation-circle mr-2"></i>确认对话框
</button>
</div>
</div>
</section>
<!-- 数据展示区域 -->
<section class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- 统计卡片 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">数据统计</h3>
<div class="space-y-4">
<div class="flex justify-between items-center">
<span class="text-gray-600">总用户数</span>
<span class="text-2xl font-bold text-blue-600">12,345</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">活跃用户</span>
<span class="text-2xl font-bold text-green-600">8,901</span>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600">今日新增</span>
<span class="text-2xl font-bold text-purple-600">234</span>
</div>
</div>
</div>
<!-- 进度展示 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">项目进度</h3>
<div class="space-y-3">
<div>
<div class="flex justify-between text-sm mb-1">
<span>前端开发</span>
<span>75%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full progress-bar" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>后端开发</span>
<span>60%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full progress-bar" style="width: 60%"></div>
</div>
</div>
<div>
<div class="flex justify-between text-sm mb-1">
<span>测试阶段</span>
<span>30%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-purple-600 h-2 rounded-full progress-bar" style="width: 30%"></div>
</div>
</div>
</div>
</div>
<!-- 图表展示 -->
<div class="bg-white rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4">销售趋势</h3>
<div class="h-48 flex items-end justify-between">
<div class="w-12 bg-blue-400 rounded-t" style="height: 60%"></div>
<div class="w-12 bg-blue-500 rounded-t" style="height: 80%"></div>
<div class="w-12 bg-blue-600 rounded-t" style="height: 70%"></div>
<div class="w-12 bg-blue-700 rounded-t" style="height: 90%"></div>
<div class="w-12 bg-blue-800 rounded-t" style="height: 85%"></div>
</div>
<div class="flex justify-between mt-2 text-xs text-gray-600">
<span>1月</span>
<span>2月</span>
<span>3月</span>
<span>4月</span>
<span>5月</span>
</div>
</div>
</section>
<!-- 数据表格 -->
<section class="mt-8 bg-white rounded-lg shadow">
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold">用户数据表</h3>
<button onclick="showDataModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
<i class="fas fa-plus mr-2"></i>添加数据
</button>
</div>
<div class="overflow-x-auto custom-scrollbar">
<table class="data-table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>邮箱</th>
<th>注册时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="dataTableBody">
<tr>
<td>001</td>
<td>张三</td>
<td>zhangsan@example.com</td>
<td>2025-01-15</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">活跃</span></td>
<td>
<button class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>lisi@example.com</td>
<td>2025-01-14</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">活跃</span></td>
<td>
<button class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>wangwu@example.com</td>
<td>2025-01-13</td>
<td><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-sm">待激活</span></td>
<td>
<button class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
<!-- 模态框 -->
<div id="modal" class="fixed inset-0 z-50 hidden">
<div class="modal-backdrop fixed inset-0 bg-black bg-opacity-50" onclick="hideModal()"></div>
<div class="fixed inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full fade-in">
<div class="flex justify-between items-center p-6 border-b">
<h3 class="text-xl font-semibold">模态框标题</h3>
<button onclick="hideModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">这是一个模态框的示例内容，您可以在其中放置任何内容，包括表单、图片、文本等。</p>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
<input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入用户名">
</div>
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
<input type="email" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="请输入邮箱">
</div>
</div>
<div class="flex justify-end space-x-3 p-6 border-t">
<button onclick="hideModal()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition">取消</button>
<button onclick="saveData()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">保存</button>
</div>
</div>
</div>
</div>
<!-- 侧边栏 -->
<div id="sidebar" class="fixed inset-y-0 right-0 z-50 w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300">
<div class="p-6 border-b">
<div class="flex justify-between items-center">
<h3 class="text-xl font-semibold">侧边栏菜单</h3>
<button onclick="hideSidebar()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<div class="p-6 overflow-y-auto custom-scrollbar" style="height: calc(100% - 80px);">
<div class="space-y-4">
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">用户信息</h4>
<div class="flex items-center mb-3">
<img src="https://picsum.photos/seed/user1/50/50.jpg" alt="用户头像" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-medium">张三</p>
<p class="text-sm text-gray-600">管理员</p>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">系统状态</h4>
<div class="space-y-2">
<div class="flex justify-between">
<span class="text-sm text-gray-600">CPU使用率</span>
<span class="text-sm font-medium">45%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-blue-600 h-2 rounded-full" style="width: 45%"></div>
</div>
<div class="flex justify-between">
<span class="text-sm text-gray-600">内存使用率</span>
<span class="text-sm font-medium">68%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-600 h-2 rounded-full" style="width: 68%"></div>
</div>
</div>
</div>
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-semibold mb-2">快速操作</h4>
<div class="space-y-2">
<button class="w-full text-left px-3 py-2 rounded hover:bg-gray-200 transition">
<i class="fas fa-file-alt mr-2"></i>生成报告
</button>
<button class="w-full text-left px-3 py-2 rounded hover:bg-gray-200 transition">
<i class="fas fa-download mr-2"></i>导出数据
</button>
<button class="w-full text-left px-3 py-2 rounded hover:bg-gray-200 transition">
<i class="fas fa-cog mr-2"></i>系统设置
</button>
</div>
</div>
</div>
</div>
</div>
<!-- 通知提示 -->
<div id="notification" class="fixed top-4 right-4 z-50 hidden">
<div class="bg-white rounded-lg shadow-lg p-4 max-w-sm slide-in">
<div class="flex items-start">
<div class="flex-shrink-0">
<i class="fas fa-check-circle text-green-500 text-xl"></i>
</div>
<div class="ml-3">
<h4 class="text-sm font-semibold text-gray-900">操作成功</h4>
<p class="text-sm text-gray-600 mt-1">您的数据已成功保存！</p>
</div>
<button onclick="hideNotification()" class="ml-auto text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</div>
<!-- 确认对话框 -->
<div id="confirmDialog" class="fixed inset-0 z-50 hidden">
<div class="modal-backdrop fixed inset-0 bg-black bg-opacity-50" onclick="hideConfirm()"></div>
<div class="fixed inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl max-w-sm w-full fade-in">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<i class="fas fa-exclamation-triangle text-yellow-500 text-3xl"></i>
</div>
<div class="ml-4">
<h3 class="text-lg font-semibold">确认删除</h3>
<p class="text-sm text-gray-600 mt-1">您确定要删除这条数据吗？此操作不可恢复。</p>
</div>
</div>
</div>
<div class="flex justify-end space-x-3 p-6 border-t">
<button onclick="hideConfirm()" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition">取消</button>
<button onclick="confirmDelete()" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">确认删除</button>
</div>
</div>
</div>
</div>
<script>
// 模态框控制
function showModal() {
document.getElementById('modal').classList.remove('hidden');
}
function hideModal() {
document.getElementById('modal').classList.add('hidden');
}
// 侧边栏控制
function showSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.remove('translate-x-full');
}
function hideSidebar() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.add('translate-x-full');
}
// 通知提示控制
function showNotification() {
const notification = document.getElementById('notification');
notification.classList.remove('hidden');
setTimeout(() => {
hideNotification();
}, 3000);
}
function hideNotification() {
document.getElementById('notification').classList.add('hidden');
}
// 确认对话框控制
function showConfirm() {
document.getElementById('confirmDialog').classList.remove('hidden');
}
function hideConfirm() {
document.getElementById('confirmDialog').classList.add('hidden');
}
// 数据模态框
function showDataModal() {
showModal();
}
// 保存数据
function saveData() {
hideModal();
showNotification();
// 这里可以添加实际的数据保存逻辑
}
// 确认删除
function confirmDelete() {
hideConfirm();
showNotification();
// 这里可以添加实际的删除逻辑
}
// 键盘事件监听
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
hideModal();
hideSidebar();
hideConfirm();
}
});
// 添加表格行
function addTableRow(data) {
const tbody = document.getElementById('dataTableBody');
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${data.id}</td>
<td>${data.name}</td>
<td>${data.email}</td>
<td>${data.date}</td>
<td><span class="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">活跃</span></td>
<td>
<button class="text-blue-600 hover:text-blue-800 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-600 hover:text-red-800" onclick="showConfirm()">
<i class="fas fa-trash"></i>
</button>
</td>
`;
tbody.appendChild(newRow);
}
// 页面加载时的动画
window.addEventListener('load', () => {
const elements = document.querySelectorAll('.bg-white');
elements.forEach((el, index) => {
setTimeout(() => {
el.classList.add('slide-up');
}, index * 100);
});
});
</script>
</body>
</html>
这个网页对话框数据效果展示页面包含了以下特性：
主要功能：
-
多种对话框类型
- 模态框（Modal）
- 侧边栏（Sidebar）
- 通知提示（Notification）
- 确认对话框（Confirm Dialog）
-
数据展示组件
- 统计卡片
- 进度条展示
- 图表可视化
- 数据表格
-
交互效果
（图片来源网络，侵删）- 平滑的动画过渡
- 响应式设计
- 键盘快捷键支持（ESC关闭）
- 悬停效果和微交互
-
视觉设计
- 现代化的UI设计
- 使用Tailwind CSS框架
- 自定义滚动条
- 毛玻璃背景效果
-
实用功能
- 表单输入
- 数据添加
- 删除确认
- 自动关闭的通知
所有的对话框都可以通过点击按钮触发，并且都有相应的关闭功能，页面还包含了丰富的数据展示元素,展示了如何在实际应用中使用这些对话框组件。
（图片来源网络，侵删）
