重构:全局自定义弹窗系统 window.chatDialog
- 新增 chat/partials/global-dialog.blade.php(全局弹窗 HTML + JS) - 提供 chatDialog.alert() 和 chatDialog.confirm() 两个异步 API - Alpine.js userCardComponent 的 $alert/$confirm 代理到全局 API - toolbar 离开按钮统一改用 chatDialog.confirm(),移除独立 leave-confirm-modal - 支持动态标题颜色、淡入动画,兼容 Chrome/Edge/Firefox
This commit is contained in:
@@ -35,32 +35,9 @@
|
||||
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
|
||||
</div>
|
||||
@endif
|
||||
<div class="tool-btn" style="color: #ffaaaa;" onclick="showLeaveConfirm()" title="离开聊天室">离开
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- ═══════════ 离开确认弹窗(自定义,避免 Chrome 原生 confirm 冲突)═══════════ --}}
|
||||
<div id="leave-confirm-modal"
|
||||
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99999;
|
||||
justify-content:center; align-items:center;">
|
||||
<div
|
||||
style="background:#fff; border-radius:8px; width:300px; box-shadow:0 8px 32px rgba(0,0,0,.3);
|
||||
overflow:hidden;">
|
||||
<div
|
||||
style="background:linear-gradient(135deg,#cc4444,#e06060); color:#fff;
|
||||
padding:12px 16px; font-size:14px; font-weight:bold;">
|
||||
⚠️ 离开聊天室</div>
|
||||
<div style="padding:20px 16px; font-size:13px; color:#444; text-align:center;">
|
||||
确定要离开聊天室吗?
|
||||
</div>
|
||||
<div style="display:flex; gap:10px; padding:0 16px 16px;">
|
||||
<button onclick="hideLeaveConfirm()"
|
||||
style="flex:1; padding:8px; background:#eee; color:#555; border:1px solid #ccc;
|
||||
border-radius:4px; font-size:13px; cursor:pointer;">取消</button>
|
||||
<button onclick="hideLeaveConfirm(); leaveRoom();"
|
||||
style="flex:1; padding:8px; background:#cc4444; color:#fff; border:none;
|
||||
border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">确定离开</button>
|
||||
</div>
|
||||
<div class="tool-btn" style="color: #ffaaaa;"
|
||||
onclick="window.chatDialog.confirm('确定要离开聊天室吗?', '离开聊天室').then(ok => { if (ok) leaveRoom(); })" title="离开聊天室">
|
||||
离开
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -340,20 +317,6 @@
|
||||
btn.style.cursor = 'pointer';
|
||||
}
|
||||
}
|
||||
/** 显示离开确认弹窗(替代原生 confirm,避免 Chrome 弹窗冲突) */
|
||||
function showLeaveConfirm() {
|
||||
document.getElementById('leave-confirm-modal').style.display = 'flex';
|
||||
}
|
||||
|
||||
/** 隐藏离开确认弹窗 */
|
||||
function hideLeaveConfirm() {
|
||||
document.getElementById('leave-confirm-modal').style.display = 'none';
|
||||
}
|
||||
|
||||
// 点遮罩关闭
|
||||
document.getElementById('leave-confirm-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) hideLeaveConfirm();
|
||||
});
|
||||
</script>
|
||||
|
||||
{{-- ═══════════ 商店弹窗 ═══════════ --}}
|
||||
|
||||
Reference in New Issue
Block a user