96 lines
3.5 KiB
PHP
96 lines
3.5 KiB
PHP
{{--
|
||
文件功能：全局自定义弹窗组件（替代原生 alert / confirm / prompt）
|
||
|
||
提供全局 JS API：
|
||
- window.chatDialog.alert(message, title?, color?) → Promise<void>
|
||
- window.chatDialog.confirm(message, title?, color?) → Promise<boolean>
|
||
- window.chatDialog.prompt(message, defaultVal?, title?, color?) → Promise<string|null>
|
||
|
||
任何 JS 代码（Alpine.js 组件、toolbar、scripts 等）均可直接调用，
|
||
无需使用浏览器原生弹窗，避免 Chrome/Edge 兼容性问题。
|
||
|
||
@author ChatRoom Laravel
|
||
@version 2.0.0
|
||
--}}
|
||
|
||
{{-- ─── 全局弹窗遮罩 ─── --}}
|
||
<div id="global-dialog-modal"
|
||
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
|
||
z-index:999999; justify-content:center; align-items:center;">
|
||
<div id="global-dialog-box"
|
||
style="background:#fff; border-radius:10px; width:320px; max-width:90vw;
|
||
box-shadow:0 12px 40px rgba(0,0,0,.35); overflow:hidden;
|
||
animation:gdSlideIn .18s ease;">
|
||
|
||
{{-- 标题栏（颜色由 JS 动态设置） --}}
|
||
<div id="global-dialog-header" style="padding:13px 18px; font-size:14px; font-weight:bold; color:#fff;">
|
||
</div>
|
||
|
||
{{-- 内容区 --}}
|
||
<div id="global-dialog-message"
|
||
style="padding:18px 18px 8px; font-size:13px; color:#374151; white-space:pre-wrap;
|
||
line-height:1.6; word-break:break-word;">
|
||
</div>
|
||
|
||
{{-- 输入框（prompt 模式专用） --}}
|
||
<div id="global-dialog-input-wrap" style="display:none; padding:0 18px 12px;">
|
||
<textarea id="global-dialog-input"
|
||
style="width:100%; box-sizing:border-box; border:1px solid #d1d5db; border-radius:6px;
|
||
padding:8px 10px; font-size:13px; color:#374151; resize:vertical;
|
||
min-height:72px; line-height:1.5; outline:none; font-family:inherit;
|
||
transition:border-color .15s;"
|
||
placeholder="请输入内容…"></textarea>
|
||
</div>
|
||
|
||
{{-- 按钮区 --}}
|
||
<div style="display:flex; gap:10px; padding:0 18px 16px;">
|
||
<button id="global-dialog-cancel-btn" data-chat-dialog-action="cancel"
|
||
style="flex:1; padding:9px; background:#f3f4f6; color:#555;
|
||
border:1px solid #d1d5db; border-radius:6px;
|
||
font-size:13px; cursor:pointer; transition:background .15s;">
|
||
取消
|
||
</button>
|
||
<button id="global-dialog-confirm-btn" data-chat-dialog-action="confirm"
|
||
style="flex:1; padding:9px; color:#fff; border:none;
|
||
border-radius:6px; font-size:13px; font-weight:bold;
|
||
cursor:pointer; transition:opacity .15s;">
|
||
确定
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
@keyframes gdSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(.92) translateY(-8px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: scale(1) translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fdSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(16px);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
#global-dialog-cancel-btn:hover {
|
||
background: #e5e7eb !important;
|
||
}
|
||
|
||
#global-dialog-confirm-btn:hover {
|
||
opacity: .88;
|
||
}
|
||
</style>
|