@{
ViewData["Title"] = "Dialog 测试演示";
}
<style>
.dialog-demo {
padding: var(--spacing-xl) 0;
}
.dialog-demo__section {
background: var(--color-bg-surface);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
border: 1px solid var(--color-border);
}
.dialog-demo__title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: var(--spacing-md);
color: var(--color-text-main);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.dialog-demo__subtitle {
font-size: 1.125rem;
font-weight: 500;
margin: var(--spacing-lg) 0 var(--spacing-md);
color: var(--color-text-secondary);
}
.dialog-demo__desc {
color: var(--color-text-secondary);
margin-bottom: var(--spacing-md);
line-height: 1.6;
}
.dialog-demo__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.dialog-demo__btn {
padding: 0.625rem 1.25rem;
border-radius: var(--radius-md);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
border: 1px solid var(--color-border);
background: var(--color-bg-surface);
color: var(--color-text-main);
}
.dialog-demo__btn:hover {
background: var(--color-primary);
color: #ffffff;
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3);
}
.dialog-demo__btn--primary {
background: var(--color-primary);
color: #ffffff;
border-color: var(--color-primary);
}
.dialog-demo__btn--success {
background: var(--color-status-success);
color: #ffffff;
border-color: var(--color-status-success);
}
.dialog-demo__btn--warning {
background: var(--color-status-warning);
color: #ffffff;
border-color: var(--color-status-warning);
}
.dialog-demo__btn--error {
background: var(--color-status-error);
color: #ffffff;
border-color: var(--color-status-error);
}
.dialog-demo__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--spacing-sm);
}
.dialog-demo__code {
background: var(--color-bg-body);
padding: var(--spacing-sm);
border-radius: var(--radius-sm);
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.875rem;
margin-top: var(--spacing-sm);
color: var(--color-text-secondary);
border: 1px solid var(--color-border);
}
.dialog-demo__tooltip-demo {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-bg-body);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
cursor: help;
margin: var(--spacing-xs);
}
@@media (max-width: 768px) {
.dialog-demo__buttons {
flex-direction: column;
}
.dialog-demo__btn {
width: 100%;
}
.dialog-demo__grid {
grid-template-columns: 1fr;
}
}
</style>
<div class="dialog-demo">
<div class="container">
<div class="dialog-demo__header">
<h1 class="dialog-demo__title">
<i class="fa fa-window-restore"></i>
Dialog 测试演示
</h1>
<p class="dialog-demo__desc">
测试和展示 dialog.js 提供的各种对话框、通知和提示功能
</p>
</div>
<!-- 模态对话框 -->
<section class="dialog-demo__section">
<h2 class="dialog-demo__title">
<i class="fa fa-square"></i>
模态对话框
</h2>
<p class="dialog-demo__desc">
阻塞式对话框，用户必须响应后才能继续操作
</p>
<div class="dialog-demo__buttons">
<button class="dialog-demo__btn" onclick="testAlert()">
<i class="fa fa-info-circle"></i> Alert 提示框
</button>
<button class="dialog-demo__btn" onclick="testConfirm()">
<i class="fa fa-question-circle"></i> Confirm 确认框
</button>
<button class="dialog-demo__btn" onclick="testPrompt()">
<i class="fa fa-edit"></i> Prompt 输入框
</button>
</div>
</section>
<!-- Toast 消息 -->
<section class="dialog-demo__section">
<h2 class="dialog-demo__title">
<i class="fa fa-comment"></i>
Toast 消息
</h2>
<p class="dialog-demo__desc">
轻量级非阻塞式消息提示，自动消失
</p>
<h3 class="dialog-demo__subtitle">消息类型</h3>
<div class="dialog-demo__buttons">
<button class="dialog-demo__btn" onclick="testToast('info')">
<i class="fa fa-info-circle"></i> Info
</button>
<button class="dialog-demo__btn dialog-demo__btn--success" onclick="testToast('success')">
<i class="fa fa-check-circle"></i> Success
</button>
<button class="dialog-demo__btn dialog-demo__btn--warning" onclick="testToast('warning')">
<i class="fa fa-exclamation-triangle"></i> Warning
</button>
<button class="dialog-demo__btn dialog-demo__btn--error" onclick="testToast('error')">
<i class="fa fa-times-circle"></i> Error
</button>
</div>
<h3 class="dialog-demo__subtitle">显示位置</h3>
<div class="dialog-demo__grid">
<button class="dialog-demo__btn" onclick="testToastPosition('top-left')">
<i class="fa fa-arrow-up"></i> 左上
</button>
<button class="dialog-demo__btn" onclick="testToastPosition('top-center')">
<i class="fa fa-arrow-up"></i> 正上
</button>
<button class="dialog-demo__btn" onclick="testToastPosition('top-right')">
<i class="fa fa-arrow-up"></i> 右上
</button>
<button class="dialog-demo__btn" onclick="testToastPosition('bottom-left')">
<i class="fa fa-arrow-down"></i> 左下
</button>
<button class="dialog-demo__btn" onclick="testToastPosition('bottom-center')">
<i class="fa fa-arrow-down"></i> 正下
</button>
<button class="dialog-demo__btn" onclick="testToastPosition('bottom-right')">
<i class="fa fa-arrow-down"></i> 右下
</button>
</div>
</section>
<!-- 工具提示 -->
<section class="dialog-demo__section">
<h2 class="dialog-demo__title">
<i class="fa fa-question-circle"></i>
工具提示 Tooltip
</h2>
<p class="dialog-demo__desc">
悬停显示的提示信息（已自动应用到所有带 title 属性的元素）
</p>
<div>
<span class="dialog-demo__tooltip-demo" title="这是一个工具提示">
悬停在我上面
</span>
<span class="dialog-demo__tooltip-demo" title="支持换行显示
这是第二行内容
这是第三行内容">
多行提示（换行）
</span>
<span class="dialog-demo__tooltip-demo" title="Tooltip 会自动根据位置调整显示方向，并且可以显示很长的文本内容">
长文本提示
</span>
</div>
</section>
<!-- 通知框 -->
<section class="dialog-demo__section">
<h2 class="dialog-demo__title">
<i class="fa fa-bell"></i>
通知框 Notification
</h2>
<p class="dialog-demo__desc">
右上角通知框，支持进度条和自动关闭
</p>
<h3 class="dialog-demo__subtitle">基础通知</h3>
<div class="dialog-demo__buttons">
<button class="dialog-demo__btn" onclick="testNotification('info')">
<i class="fa fa-info-circle"></i> Info 通知
</button>
<button class="dialog-demo__btn dialog-demo__btn--success" onclick="testNotification('success')">
<i class="fa fa-check-circle"></i> Success 通知
</button>
<button class="dialog-demo__btn dialog-demo__btn--warning" onclick="testNotification('warning')">
<i class="fa fa-exclamation-triangle"></i> Warning 通知
</button>
<button class="dialog-demo__btn dialog-demo__btn--error" onclick="testNotification('error')">
<i class="fa fa-times-circle"></i> Error 通知
</button>
</div>
<h3 class="dialog-demo__subtitle">进度条通知</h3>
<div class="dialog-demo__buttons">
<button class="dialog-demo__btn dialog-demo__btn--primary" onclick="testProgressNotification()">
<i class="fa fa-tasks"></i> 单进度条
</button>
<button class="dialog-demo__btn dialog-demo__btn--primary" onclick="testMultiProgressNotification()">
<i class="fa fa-list"></i> 多进度条
</button>
<button class="dialog-demo__btn dialog-demo__btn--error" onclick="closeAllNotifications()">
<i class="fa fa-times"></i> 关闭所有通知
</button>
</div>
</section>
<!-- 综合测试 -->
<section class="dialog-demo__section">
<h2 class="dialog-demo__title">
<i class="fa fa-flask"></i>
综合测试
</h2>
<p class="dialog-demo__desc">
同时测试多种对话框效果
</p>
<div class="dialog-demo__buttons">
<button class="dialog-demo__btn dialog-demo__btn--primary" onclick="testAll()">
<i class="fa fa-play"></i> 运行综合测试
</button>
</div>
</section>
</div>
</div>
评论加载中...