lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

修复：所有婚姻弹窗无法显示的 bug

Browse Source 
根因：外层容器 style='display:none' 写死，
Alpine x-show 把内层改为 flex，但外层 CSS 始终覆盖，
导致求婚弹窗、收婚弹窗、结婚成功弹窗、婚礼设置弹窗、
婚礼红包弹窗一律无法显示。

修复方案：将 show 状态的 x-show 移到外层容器，
内层固定显示（position:fixed + flex），去掉冲突的 display:none。
同时补充 x-cloak 防止页面加载时闪烁。
This commit is contained in:
流星
2026-03-01 17:17:14 +08:00
parent d703309a34
commit 9c4598ab66
1 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/marriage-modals.blade.php
+14 -15
View File
@@ -15,9 +15,8 @@
--}} --}}
{{-- ═══════════ 1. 求婚弹窗 ═══════════ --}} {{-- ═══════════ 1. 求婚弹窗 ═══════════ --}}
<div id="marriage-propose-modal" x-data="marriageProposeModal()" style="display:none"> <div id="marriage-propose-modal" x-data="marriageProposeModal()" x-show="show" x-cloak>
<div x-show="show" <div style="position:fixed; inset:0; background:rgba(0,0,0,.6);
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
z-index:9800; display:flex; align-items:center; justify-content:center;" z-index:9800; display:flex; align-items:center; justify-content:center;"
x-on:click.self="close()"> x-on:click.self="close()">
<div <div
@@ -91,9 +90,9 @@
</div> </div>
{{-- ═══════════ 2. 收到求婚弹窗 ═══════════ --}} {{-- ═══════════ 2. 收到求婚弹窗 ═══════════ --}}
<div id="marriage-incoming-modal" x-data="marriageIncomingModal()" style="display:none"> <div id="marriage-incoming-modal" x-data="marriageIncomingModal()" x-show="show" x-cloak>
<div x-show="show" <div
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); style="position:fixed; inset:0; background:rgba(0,0,0,.65);
z-index:9850; display:flex; align-items:center; justify-content:center;"> z-index:9850; display:flex; align-items:center; justify-content:center;">
<div <div
style="width:380px; max-width:95vw; background:#fff; border-radius:20px; style="width:380px; max-width:95vw; background:#fff; border-radius:20px;
@@ -138,9 +137,9 @@
</div> </div>
{{-- ═══════════ 3. 结婚成功全屏公告 ═══════════ --}} {{-- ═══════════ 3. 结婚成功全屏公告 ═══════════ --}}
<div id="marriage-accepted-modal" x-data="marriageAcceptedModal()" style="display:none"> <div id="marriage-accepted-modal" x-data="marriageAcceptedModal()" x-show="show" x-cloak>
<div x-show="show" x-transition <div x-transition
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); style="position:fixed; inset:0; background:rgba(0,0,0,.7);
z-index:9900; display:flex; align-items:center; justify-content:center;"> z-index:9900; display:flex; align-items:center; justify-content:center;">
<div <div
style="width:460px; max-width:95vw; background:#fff; border-radius:24px; style="width:460px; max-width:95vw; background:#fff; border-radius:24px;
@@ -172,9 +171,9 @@
</div> </div>
{{-- ═══════════ 4. 婚礼设置弹窗 ═══════════ --}} {{-- ═══════════ 4. 婚礼设置弹窗 ═══════════ --}}
<div id="wedding-setup-modal" x-data="weddingSetupModal()" style="display:none"> <div id="wedding-setup-modal" x-data="weddingSetupModal()" x-show="show" x-cloak>
<div x-show="show" <div
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); style="position:fixed; inset:0; background:rgba(0,0,0,.65);
z-index:9820; display:flex; align-items:center; justify-content:center;"> z-index:9820; display:flex; align-items:center; justify-content:center;">
<div <div
style="width:500px; max-width:95vw; background:#fff; border-radius:20px; style="width:500px; max-width:95vw; background:#fff; border-radius:20px;
@@ -303,9 +302,9 @@
</div> </div>
{{-- ═══════════ 5. 婚礼红包弹窗（全局触发） ═══════════ --}} {{-- ═══════════ 5. 婚礼红包弹窗（全局触发） ═══════════ --}}
<div id="wedding-envelope-modal" x-data="weddingEnvelopeModal()" style="display:none"> <div id="wedding-envelope-modal" x-data="weddingEnvelopeModal()" x-show="show" x-cloak>
<div x-show="show" x-transition <div x-transition
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); style="position:fixed; inset:0; background:rgba(0,0,0,.6);
z-index:9910; display:flex; align-items:center; justify-content:center;"> z-index:9910; display:flex; align-items:center; justify-content:center;">
<div <div
style="width:380px; max-width:95vw; background:linear-gradient(160deg,#7c2d12,#9a3412); style="width:380px; max-width:95vw; background:linear-gradient(160deg,#7c2d12,#9a3412);