From 5a2b77718a4c33b94e2ede46c8915bf427ce9caa Mon Sep 17 00:00:00 2001 From: Tony996 <6914529@qq.com> Date: Thu, 2 Jul 2026 12:30:06 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(dialog):=E5=BC=B9=E7=AA=97=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E5=90=8E=E5=86=8D=E6=AC=A1=E6=98=BE=E7=A4=BA=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E5=8D=95=E5=87=BB=E8=83=8C=E6=99=AF=E5=8A=A8=E7=94=BB?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor:由于 Bootstrap 里面有bug，第一次点击背景层时，会自动加上 modal-static，但窗口关闭后再次显示点击背景时并没有自动加上 modal-static，因此在组件中手动处理该逻辑 --- .../Components/Modal/Modal.razor.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js index dc2fc33de19..958269a6f3f 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js @@ -42,6 +42,30 @@ export function init(id, invoke, shownCallback, closeCallback) { modal.modal._config.keyboard = el.getAttribute('data-bs-keyboard') === 'true' modal.modal._config.backdrop = backdrop modal.modal.show() + + // 自己监听背景点击 + el.addEventListener('click', e => { + if (e.target === el && e.target.classList.contains('modal') && e.target.classList.contains('fade') && e.target.classList.contains('show')) { + // 点击的是背景层 + if (backdrop !== 'static') { + EventHandler.off(el, 'click') + modal.close(); + } + else { + /* + * 由于 Bootstrap 里面有bug，第一次点击背景层时，会自动加上 modal-static， + * 但窗口关闭后再次显示点击背景时并没有自动加上 modal-static，所以这里需要手动处理 + */ + e.target.classList.add('modal-static'); + e.target.style.overflowY = 'hide'; + var timer = setTimeout(function () { + e.target.classList.remove('modal-static'); + e.target.style.overflowY = ''; + clearTimeout(timer); + }, 300) + } + } + }) } else { modal.invoke.invokeMethodAsync(modal.shownCallback) From b6923e257a53ee3fb3de11366a2bc6fce1fac370 Mon Sep 17 00:00:00 2001 From: Tony996 <6914529@qq.com> Date: Thu, 2 Jul 2026 19:25:50 +0800 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=E8=A1=A5=E5=85=85=E5=A4=9A?= =?UTF-8?q?=E5=B1=82=E5=BC=B9=E7=AA=97=E5=8D=95=E5=87=BB=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refactor:补充多层弹窗单击背景效果 --- src/BootstrapBlazor/Components/Modal/Modal.razor.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js index 958269a6f3f..7d044873dad 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js @@ -124,6 +124,19 @@ export function init(id, invoke, shownCallback, closeCallback) { if (backdrop !== 'static') { modal.close(); } + else { + const dialogs = el.querySelectorAll('.modal-dialog-scrollable'); + if (dialogs.length > 0) { + const dial = dialogs[dialogs.length - 1]; + dial.style.overflowY = 'hide'; + dial.style.transform = 'scale(1.02)'; + var timer = setTimeout(function () { + dial.style.transform = ''; + dial.style.overflowY = ''; + clearTimeout(timer); + }, 300) + } + } } }) } From 669b842b109926390da00c2a27f5752e24d6649d Mon Sep 17 00:00:00 2001 From: Tony996 <6914529@qq.com> Date: Fri, 3 Jul 2026 08:36:34 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fixed:=E4=BF=AE=E6=AD=A3overflowY=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=80=BC=E8=AE=BE=E7=BD=AE=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fixed:修正overflowY属性值设置错误 --- src/BootstrapBlazor/Components/Modal/Modal.razor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js index 7d044873dad..d2ee6b6814f 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js @@ -57,7 +57,7 @@ export function init(id, invoke, shownCallback, closeCallback) { * 但窗口关闭后再次显示点击背景时并没有自动加上 modal-static，所以这里需要手动处理 */ e.target.classList.add('modal-static'); - e.target.style.overflowY = 'hide'; + e.target.style.overflowY = 'hidden'; var timer = setTimeout(function () { e.target.classList.remove('modal-static'); e.target.style.overflowY = ''; @@ -128,7 +128,7 @@ export function init(id, invoke, shownCallback, closeCallback) { const dialogs = el.querySelectorAll('.modal-dialog-scrollable'); if (dialogs.length > 0) { const dial = dialogs[dialogs.length - 1]; - dial.style.overflowY = 'hide'; + dial.style.overflowY = 'hidden'; dial.style.transform = 'scale(1.02)'; var timer = setTimeout(function () { dial.style.transform = '';