修复:设置弹窗遮挡全局 chatDialog 按钮的问题

overflow-y:auto 会在 CSS 中创建新的堆叠上下文(stacking context),
导致即使全局弹窗 z-index 更高,在视觉上依然被 overflow 容器裁切,
造成「确定」按钮被弹窗底部遮挡无法点击。

修复方案:
- 外层容器移除 overflow-y:auto,改为 display:flex + flex-direction:column
- 标题栏加 flex-shrink:0 固定高度不被压缩
- 内容区单独加 overflow-y:auto + flex:1 保留滚动能力
- 外层遮罩 z-index 从 9999 提升至 10000(仍低于全局弹窗的 999999)
This commit is contained in:
2026-03-04 14:24:11 +08:00
parent f867e912e9
commit 2b990942c0

View File

@@ -80,20 +80,21 @@
{{-- ═══════════ 个人设置弹窗 ═══════════ --}}
<div id="settings-modal"
style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
background:rgba(0,0,0,0.5); z-index:10000; justify-content:center; align-items:center;">
<div
style="background:#fff; border-radius:8px; width:380px; max-height:90vh; overflow-y:auto;
box-shadow:0 8px 32px rgba(0,0,0,0.3);">
{{-- 标题栏 --}}
style="background:#fff; border-radius:8px; width:380px; max-height:90vh;
box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
{{-- --}}}
<div
style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center;">
padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
<span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
<span onclick="document.getElementById('settings-modal').style.display='none'"
style="cursor:pointer; font-size:18px; opacity:0.8;">&times;</span>
</div>
<div style="padding:16px;">
{{-- 内容滚动区:把 overflow-y:auto 放到内层,避免外层 overflow 创建堆叠上下文论clip全局弹窗 --}}
<div style="padding:16px; overflow-y:auto; flex:1;">
{{-- 修改密码 --}}
<div style="margin-bottom:16px; border:1px solid #e0e0e0; border-radius:6px; padding:12px;">
<div style="font-size:12px; font-weight:bold; color:#336699; margin-bottom:8px;">🔒 修改密码</div>