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/5] =?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/5] =?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/5] =?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 = ''; From 180105ab4c1e69a3c6b3007b16ae2eb33262dd37 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 9 Jul 2026 15:59:49 +0800 Subject: [PATCH 4/5] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Modal/Modal.razor.js | 46 +++++-------------- 1 file changed, 12 insertions(+), 34 deletions(-) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js index d2ee6b6814f..f531eeb5a4e 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js @@ -39,33 +39,16 @@ export function init(id, invoke, shownCallback, closeCallback) { // hack: fix focusin event modal.modal._focustrap._handleFocusin = e => { } } + + /* + * Dialog 服务再次弹窗时 .modal-dialog 元素已被重建，实例构造时缓存的 _dialog 变为游离节点， + * 导致 Bootstrap 计算 static 背景动画的过渡时长为 0（modal-static 加上后立即被移除，看不到动画）， + * 因此每次显示时刷新引用 + */ + modal.modal._dialog = dialogs[0] 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 = 'hidden'; - var timer = setTimeout(function () { - e.target.classList.remove('modal-static'); - e.target.style.overflowY = ''; - clearTimeout(timer); - }, 300) - } - } - }) } else { modal.invoke.invokeMethodAsync(modal.shownCallback) @@ -124,17 +107,12 @@ export function init(id, invoke, shownCallback, closeCallback) { if (backdrop !== 'static') { modal.close(); } - else { - const dialogs = el.querySelectorAll('.modal-dialog-scrollable'); + else if (modal.modal) { + // 多层弹窗未使用 bootstrap 实例显示，手动触发 static 背景动画，过渡时长取自当前显示的 .modal-dialog + const dialogs = [...el.querySelectorAll('.modal-dialog')].filter(d => !d.classList.contains('d-none')); if (dialogs.length > 0) { - const dial = dialogs[dialogs.length - 1]; - dial.style.overflowY = 'hidden'; - dial.style.transform = 'scale(1.02)'; - var timer = setTimeout(function () { - dial.style.transform = ''; - dial.style.overflowY = ''; - clearTimeout(timer); - }, 300) + modal.modal._dialog = dialogs[dialogs.length - 1]; + modal.modal._triggerBackdropTransition(); } } } From 8e14b5b6cfc7bc739e3c3b709ec9c2f3e18ae480 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 9 Jul 2026 16:09:23 +0800 Subject: [PATCH 5/5] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=B3=A8?= =?UTF-8?q?=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Components/Modal/Modal.razor.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor.js b/src/BootstrapBlazor/Components/Modal/Modal.razor.js index f531eeb5a4e..37cf133b0cf 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor.js +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor.js @@ -40,11 +40,6 @@ export function init(id, invoke, shownCallback, closeCallback) { modal.modal._focustrap._handleFocusin = e => { } } - /* - * Dialog 服务再次弹窗时 .modal-dialog 元素已被重建，实例构造时缓存的 _dialog 变为游离节点， - * 导致 Bootstrap 计算 static 背景动画的过渡时长为 0（modal-static 加上后立即被移除，看不到动画）， - * 因此每次显示时刷新引用 - */ modal.modal._dialog = dialogs[0] modal.modal._config.keyboard = el.getAttribute('data-bs-keyboard') === 'true' modal.modal._config.backdrop = backdrop @@ -108,7 +103,6 @@ export function init(id, invoke, shownCallback, closeCallback) { modal.close(); } else if (modal.modal) { - // 多层弹窗未使用 bootstrap 实例显示，手动触发 static 背景动画，过渡时长取自当前显示的 .modal-dialog const dialogs = [...el.querySelectorAll('.modal-dialog')].filter(d => !d.classList.contains('d-none')); if (dialogs.length > 0) { modal.modal._dialog = dialogs[dialogs.length - 1];