lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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. 求婚弹窗 ═══════════ --}}
<div id="marriage-propose-modal" x-data="marriageProposeModal()" style="display:none">
<div x-show="show"
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
<div id="marriage-propose-modal" x-data="marriageProposeModal()" x-show="show" x-cloak>
<div style="position:fixed; inset:0; background:rgba(0,0,0,.6);
z-index:9800; display:flex; align-items:center; justify-content:center;"
x-on:click.self="close()">
<div
@@ -91,9 +90,9 @@
</div>
{{-- ═══════════ 2. 收到求婚弹窗 ═══════════ --}}
<div id="marriage-incoming-modal" x-data="marriageIncomingModal()" style="display:none">
<div x-show="show"
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
<div id="marriage-incoming-modal" x-data="marriageIncomingModal()" x-show="show" x-cloak>
<div
style="position:fixed; inset:0; background:rgba(0,0,0,.65);
z-index:9850; display:flex; align-items:center; justify-content:center;">
<div
style="width:380px; max-width:95vw; background:#fff; border-radius:20px;
@@ -138,9 +137,9 @@
</div>
{{-- ═══════════ 3. 结婚成功全屏公告 ═══════════ --}}
<div id="marriage-accepted-modal" x-data="marriageAcceptedModal()" style="display:none">
<div x-show="show" x-transition
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.7);
<div id="marriage-accepted-modal" x-data="marriageAcceptedModal()" x-show="show" x-cloak>
<div x-transition
style="position:fixed; inset:0; background:rgba(0,0,0,.7);
z-index:9900; display:flex; align-items:center; justify-content:center;">
<div
style="width:460px; max-width:95vw; background:#fff; border-radius:24px;
@@ -172,9 +171,9 @@
</div>
{{-- ═══════════ 4. 婚礼设置弹窗 ═══════════ --}}
<div id="wedding-setup-modal" x-data="weddingSetupModal()" style="display:none">
<div x-show="show"
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
<div id="wedding-setup-modal" x-data="weddingSetupModal()" x-show="show" x-cloak>
<div
style="position:fixed; inset:0; background:rgba(0,0,0,.65);
z-index:9820; display:flex; align-items:center; justify-content:center;">
<div
style="width:500px; max-width:95vw; background:#fff; border-radius:20px;
@@ -303,9 +302,9 @@
</div>
{{-- ═══════════ 5. 婚礼红包弹窗（全局触发） ═══════════ --}}
<div id="wedding-envelope-modal" x-data="weddingEnvelopeModal()" style="display:none">
<div x-show="show" x-transition
style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
<div id="wedding-envelope-modal" x-data="weddingEnvelopeModal()" x-show="show" x-cloak>
<div x-transition
style="position:fixed; inset:0; background:rgba(0,0,0,.6);
z-index:9910; display:flex; align-items:center; justify-content:center;">
<div
style="width:380px; max-width:95vw; background:linear-gradient(160deg,#7c2d12,#9a3412);