diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css index 959d14ef..7a12ba96 100644 --- a/assets/css/routes/user-center/credits.css +++ b/assets/css/routes/user-center/credits.css @@ -169,8 +169,14 @@ .modal[data-aksrt-charge-modal] { display: none; } +/* 打开态必须是 flex(而非 bootstrap 的内联 display:block):无头 Chrome + 对 Zibll 真实 CSS 的几何实证显示,display:block 下 .modal.flex + .modal-dialog{margin:0} 使对话框顶在左上角;flex 下由壳上的 .flex.jc + (align-items:center;justify-content:center)双轴居中——Zibll 生产环境 + 即此形态(其 jQuery .show() 对 computed≠none 的壳是空操作,内联 + display 从未写入)。 */ .modal[data-aksrt-charge-modal].in { - display: block; + display: flex; } .balance-charge-form .zib-widget { diff --git a/assets/js/credits.js b/assets/js/credits.js index 26a47996..9c21328f 100644 --- a/assets/js/credits.js +++ b/assets/js/credits.js @@ -401,7 +401,9 @@ if (modal.classList.contains('in')) return; // 兼容旧缓存标记(uc-modal 带 hidden 属性) modal.removeAttribute('hidden'); - modal.style.display = 'block'; + // 打开态用 flex 而非 block:壳的 .flex.jc 负责双轴居中, + // .modal.flex .modal-dialog{margin:0} 在 block 下会把对话框顶到左上角。 + modal.style.display = 'flex'; void modal.offsetWidth; // 强制 reflow,让 .fade 过渡从初始态开始 modal.classList.add('in'); if (!chargeBackdrop) { diff --git a/tests/widget-system/balance-charge-modal.test.cjs b/tests/widget-system/balance-charge-modal.test.cjs index e276898b..0896f389 100644 --- a/tests/widget-system/balance-charge-modal.test.cjs +++ b/tests/widget-system/balance-charge-modal.test.cjs @@ -10,9 +10,11 @@ * * 因此 credits.css 必须以 (0,2,0) 特异性压制: * .modal[data-aksrt-charge-modal] { display: none; } - * .modal[data-aksrt-charge-modal].in { display: block; } - * 展示态由 credits.js 自包含开关的内联 display:block 驱动(不依赖 - * jQuery/Bootstrap 运行时),关闭后内联样式撤除即回到隐藏规则。 + * .modal[data-aksrt-charge-modal].in { display: flex; } + * 展示态由 credits.js 自包含开关的内联 display:flex 驱动(不依赖 + * jQuery/Bootstrap 运行时;block 会破坏 .flex.jc 双轴居中—— + * .modal.flex .modal-dialog{margin:0} 在 block 下使对话框顶在左上角), + * 关闭后内联样式撤除即回到隐藏规则。 */ const test = require('node:test'); const assert = require('node:assert'); @@ -36,7 +38,11 @@ test('弹窗壳为 Zibll refresh_modal 同构静态壳并带 data 钩子', () => test('弹窗壳静止态必须被 credits.css 显式隐藏(.flex 覆盖回归护栏)', () => { // (0,2,0) 特异性压制 main.css 的 .flex{display:flex}。 assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\s*\{\s*display:\s*none;/); - assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*block;/); + // 打开态必须是 flex 而非 block:.modal.flex .modal-dialog{margin:0} 在 + // block 下使对话框顶在左上角(无头 Chrome 几何实证),flex 下由壳的 + // .flex.jc 双轴居中(Zibll 生产环境即此形态)。 + assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*flex;/); + assert.doesNotMatch(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*block;/); }); test('开关自包含:不依赖 jQuery/Bootstrap modal 运行时', () => { @@ -51,4 +57,7 @@ test('开关自包含:不依赖 jQuery/Bootstrap modal 运行时', () => { // 打开前移除旧缓存 hidden 标记;关闭走 300ms fade-out 收尾。 assert.match(creditsJs, /removeAttribute\('hidden'\)/); assert.match(creditsJs, /void modal\.offsetWidth/); + // 打开态内联 display 必须是 flex(block 会破坏 .flex.jc 双轴居中)。 + assert.match(creditsJs, /modal\.style\.display = 'flex'/); + assert.doesNotMatch(creditsJs, /modal\.style\.display = 'block'/); });