Blazor纯C#实现Modal弹窗无需JS，核心是状态驱动显隐、防滚动、点击遮罩/ESC关闭、焦点管理及可配置样式；通过RenderFragment支持嵌套内容，配合CSS遮罩与动画，兼顾可访问性与体验。
Blazor 实现弹窗（Modal）不依赖 JS，纯 C# + Razor 就能搞定，核心是用组件化 + 状态控制 + CSS 遮罩层。关键点：状态驱动显隐、防止背景滚动、点击遮罩关闭、支持嵌套内容、键盘 ESC 关闭。
基础 Modal 组件结构
建一个 Modal.razor 文件，用 @if (isVisible) 控制整体渲染，内部包含遮罩层（modal-backdrop）和弹窗主体（modal-dialog）。用 bool isVisible 和 EventCallback OnClose 实现父子通信。
- 用
tabindex="-1"让弹窗获得焦点，便于 ESC 捕获 - 遮罩层
onclick="@Close"支持点击关闭 - 加
style="overflow: hidden"到<body>或根容器防滚动（可封装在OnInitialized中动态切换）
从父组件调用 Modal
在需要触发的地方，比如按钮点击，设 isVisible = true，并传入内容（用 RenderFragment）：
- 父组件中定义
bool showMyModal = false; - 按钮：
<button @onclick="() => showMyModal = true">打开弹窗</button> - 插入 Modal：
<Modal @bind-IsVisible="showMyModal"><ChildContent><p>这是弹窗内容</p></ChildContent></Modal>
支持 ESC 关闭和焦点管理
在 Modal.razor 的 @code 块里加键盘监听：
- 重写
OnAfterRenderAsync，首次渲染后用JSRuntime绑定keydown（仅需一次），监听Escape - 或更轻量：在弹窗
<div tabindex="-1">上用@onkeydown:preventDefault捕获事件（Blazor WebAssembly 8.0+ 支持） - 关闭时主动将焦点切回触发按钮（存 ref，
element.FocusAsync()）
进阶：带标题/按钮/大小的可配置 Modal
扩展参数如 string Title、ModalSize Size = ModalSize.Medium（枚举：Small / Medium / Large）、bool CloseButton = true，再配合 CSS 类动态绑定：
-
<div class="modal-dialog @GetSizeClass()">→string GetSizeClass() => Size switch { Small => "modal-sm", Large => "modal-lg", _ => "" }; - 确认/取消按钮用
RenderFragment FooterContent，让父组件自定义按钮逻辑 - 加淡入动画？用 CSS
@keyframes+transition，配合class="@($"{isVisible ? "show" : ""}")"
基本上就这些。不需要第三方库也能做出体验接近 Bootstrap Modal 的效果，关键是状态同步及时、交互反馈明确、可访问性（a11y）到位。自己封装一遍，比直接用 JS Interop 更可控也更 Blazor。
