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"到 或根容器防滚动（可封装在
OnInitialized中动态切换）
从父组件调用 Modal
在需要触发的地方，比如按钮点击，设
isVisible = true，并传入内容（用
RenderFragment）： 父组件中定义
bool showMyModal = false;按钮：
<button> showMyModal = true">打开弹窗</button>插入 Modal：
<modal><childcontent><p>这是弹窗内容</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1915" title="Summarizer"><img
src="https://www.herecours.com/d/file/efpub/2026/21-21/20260221135916179325.jpg" alt="Summarizer" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1915" title="Summarizer">Summarizer</a>
<p>基于 AI 的文本段落摘要生成器</p>
</div>
<a href="/ai/1915" title="Summarizer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div></childcontent></modal>
支持 ESC 关闭和焦点管理
在
Modal.razor的
@code块里加键盘监听： 重写
OnAfterRenderAsync，首次渲染后用
JSRuntime绑定
keydown（仅需一次），监听
Escape或更轻量：在弹窗
<div tabindex="-1"> 上用 <code>@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()"> → <code>string GetSizeClass() => Size switch { Small => "modal-sm", Large => "modal-lg", _ => "" };确认/取消按钮用 RenderFragment FooterContent，让父组件自定义按钮逻辑 加淡入动画？用 CSS
@keyframes+
transition，配合
class="@($"{isVisible ? "show" : ""}")"
基本上就这些。不需要第三方库也能做出体验接近 Bootstrap Modal 的效果，关键是状态同步及时、交互反馈明确、可访问性（a11y）到位。自己封装一遍，比直接用 JS Interop 更可控也更 Blazor。
