feat(dialog):弹窗关闭后再次显示弹窗单击背景动画修改

[Tony-ST0754]

Link issues

fixes #8176

根本原因 / Root Cause

由于 Bootstrap 里面有bug，第一次点击背景层时，会自动加上 modal-static，但窗口关闭后再次显示点击背景时并没有自动加上 modal-static，因此在组件中手动处理该逻辑

第一次单击背景时会自动如下

<div class='modal fade show modal-static' style='overflow-y: hidden;'>
   ...内容...
</div>

关闭弹窗后，再次显示弹窗，单击背景时会自动如下

<div class='modal fade show'>
   ...内容...
</div>

解决方案 / Solution

由于是 Bootstrap内部的bug，因此要不等Bootstrap修复bug后，BB组件更新，要么在BB组件内部自行处理监听单击背景的Click事件中处理

Summary By Copilot

Regression?

• Yes
• No

Risk

• High
• Medium
• Low

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Handle modal backdrop clicks to work around a Bootstrap bug affecting repeated dialog openings.

Bug Fixes:

• Ensure clicking the modal backdrop after reopening a dialog correctly applies the modal-static behavior for non-dismissible backdrops and closes the modal for other backdrops.

Enhancements:

• Add custom click handling on the modal element to distinguish backdrop clicks, close the modal when appropriate, and simulate Bootstrap's modal-static animation on subsequent openings.

[bb-auto]

Thanks for your PR, @Tony-ST0754. Someone from the team will get assigned to your PR shortly and we'll get it reviewed.

[sourcery-ai]

Reviewer's Guide

Implements a workaround for a Bootstrap modal bug by manually handling backdrop clicks to properly close the modal or trigger the static-backdrop animation on subsequent openings.

Sequence diagram for modal backdrop click handling workaround

sequenceDiagram
    actor User
    participant ModalElement as ModalElement_div.modal
    participant JsHandler as Modal_razor_js
    participant BootstrapModal as Bootstrap_modal_instance

    User->>ModalElement: click
    ModalElement->>JsHandler: click event listener
    JsHandler->>JsHandler: [e.target === el && has classes modal,fade,show]
    alt [backdrop !== static]
        JsHandler->>ModalElement: EventHandler.off click
        JsHandler->>BootstrapModal: modal.close()
    else [backdrop === static]
        JsHandler->>ModalElement: classList.add modal-static
        JsHandler->>ModalElement: style.overflowY = hide
        JsHandler->>JsHandler: setTimeout 300ms
        JsHandler->>ModalElement: classList.remove modal-static
        JsHandler->>ModalElement: style.overflowY = "" 
    end

Loading

File-Level Changes

Change	Details	Files
Add custom backdrop click handling on the modal element to correctly close the modal or apply the static backdrop animation when Bootstrap fails to do so on subsequent opens.	Attach a click event listener to the modal root element after initializing and showing the Bootstrap modal. Detect clicks specifically on the modal backdrop by checking the event target and required CSS classes. If backdrop mode is not static, remove the click handler and close the modal programmatically. If backdrop mode is static, manually add the 'modal-static' class and temporary overflowY style to simulate the shake animation, then remove them after a timeout.	src/BootstrapBlazor/Components/Modal/Modal.razor.js

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#8176	Fix the modal component so that for modals with a static backdrop (must-click-button-to-close), the "prevent close" background-click animation behaves correctly every time the modal is opened, including in the Table edit modal-content example.	✅

Possibly linked issues

• bug(): 模态窗口 modal-content 动画异常 #8176: PR manually adds/removes modal-static on background clicks, fixing the repeated-open animation bug described in issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've left some high level feedback:

• The click listener is attached with el.addEventListener('click', ...) but later removed via EventHandler.off(el, 'click'), which won’t detach this handler; consider using removeEventListener or a shared handler reference to avoid accumulating multiple listeners across inits.
• In the static backdrop branch, e.target.style.overflowY = 'hide'; uses a non-standard value and will be ignored by the browser; this should likely be 'hidden' to match Bootstrap’s behavior.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The click listener is attached with `el.addEventListener('click', ...)` but later removed via `EventHandler.off(el, 'click')`, which won’t detach this handler; consider using `removeEventListener` or a shared handler reference to avoid accumulating multiple listeners across inits.
- In the static backdrop branch, `e.target.style.overflowY = 'hide';` uses a non-standard value and will be ignored by the browser; this should likely be `'hidden'` to match Bootstrap’s behavior.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.79%. Comparing base (16aca10) to head (669b842).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8181   +/-   ##
=======================================
  Coverage   98.78%   98.79%           
=======================================
  Files         766      766           
  Lines       34221    34221           
  Branches     4699     4699           
=======================================
+ Hits        33806    33807    +1     
+ Partials      415      414    -1     

Flag	Coverage Δ
BB	98.79% <ø> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.