Blazor Server(.NET7)中Bootstrap 5模态框静态遮罩失效问题

在Blazor Server中直接给模态框元素设置data-bs-backdrop="static"和data-bs-keyboard="false"无效，核心原因是Blazor的组件渲染时机与Bootstrap模态框的初始化逻辑不匹配：

• 如果模态框是Blazor动态渲染（比如通过@if条件控制显示），Bootstrap可能在DOM元素渲染完成前就尝试初始化，导致无法读取到这些data属性；
• Blazor的DOM更新机制可能会覆盖或延迟Bootstrap对属性的识别，使得静态data属性无法生效。

以下两种方法可以确保属性生效，推荐第一种显式配置的方式：

方法1：通过JS互操作显式传递模态框配置 #

利用Blazor的IJSRuntime直接调用Bootstrap的模态框API，传入backdrop和keyboard参数，这种方式最可靠：

@inject IJSRuntime JSRuntime

<!-- 模态框根元素 -->
<div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="alertModalLabel">提示</h5>
            </div>
            <div class="modal-body">
                这是一个无法点击遮罩或按ESC关闭的模态框
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

@code {
    // 显示模态框的方法
    public async Task ShowAlertModal()
    {
        // 初始化模态框并传入配置
        var modalInstance = await JSRuntime.InvokeAsync<IJSObjectReference>(
            "bootstrap.Modal.getOrCreateInstance", 
            "#alertModal", 
            new { backdrop = "static", keyboard = false }
        );
        // 调用show方法显示模态框
        await modalInstance.InvokeVoidAsync("show");
    }
}

方法2：确保渲染完成后初始化模态框（保留data属性） #

如果坚持使用data属性，需要在Blazor组件渲染完成后，手动触发Bootstrap的模态框初始化，确保属性被正确读取：

@inject IJSRuntime JSRuntime
@if (IsModalVisible)
{
    <div class="modal fade" id="alertModal" tabindex="-1" aria-labelledby="alertModalLabel" aria-hidden="true"
         data-bs-backdrop="static" data-bs-keyboard="false">
        <!-- 模态框内容同上 -->
    </div>
}

@code {
    public bool IsModalVisible { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (IsModalVisible)
        {
            // 初始化并显示模态框
            var modalInstance = await JSRuntime.InvokeAsync<IJSObjectReference>("bootstrap.Modal.getOrCreateInstance", "#alertModal");
            await modalInstance.InvokeVoidAsync("show");
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    public void ShowModal()
    {
        IsModalVisible = true;
        StateHasChanged();
    }
}

• 确保Bootstrap 5的JS文件已正确引入到项目的_Layout.cshtml中；
• 避免同时使用Blazor的事件和Bootstrap的默认关闭逻辑，防止冲突；
• 模态框的id必须唯一，避免多个模态框实例混淆。

内容的提问来源于stack exchange，提问作者mzonato