修复:设置弹窗遮挡全局 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:
@@ -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;">×</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>
|
||||
|
||||
Reference in New Issue
Block a user