修复:Chrome 离开按钮 confirm 弹窗闪烁 → 自定义 HTML 弹窗

- 移除原生 confirm(),改为自定义 #leave-confirm-modal 弹窗
- 红色渐变标题栏,取消/确定离开两个按钮
- 点击遮罩可关闭,不触发任何浏览器原生对话框机制
This commit is contained in:
2026-03-01 00:29:00 +08:00
parent f0cbcfa949
commit e2ae4b34b3

View File

@@ -35,7 +35,32 @@
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
</div>
@endif
<div class="tool-btn" style="color: #ffaaaa;" onclick="if(confirm('确定要离开聊天室吗?')){leaveRoom();}" title="离开聊天室">离开
<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>
</div>
@@ -315,6 +340,20 @@
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>
{{-- ═══════════ 商店弹窗 ═══════════ --}}