如何在Blazor中无需关闭按钮点击弹窗外部关闭弹窗？

针对你的需求，只需给弹窗添加点击事件区分内外区域，并给背景层绑定关闭逻辑即可，具体修改如下：

1. 修改弹窗组件代码 #

在现有ModalPage.razor中做三处核心修改：

（1）给最外层弹窗容器添加点击关闭事件 #

给最外层的.modal div绑定点击事件，点击该区域时触发弹窗关闭：

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;"
     @onclick="HandleModalClick">

（2）阻止弹窗内部区域的事件冒泡 #

给.modal-dialog添加事件阻止冒泡属性，确保点击弹窗内部内容时，不会触发外层的关闭逻辑：

<div class="modal-dialog modal-lg" role="document" @onclick:stopPropagation="true">

（3）给背景层绑定关闭事件 #

单独给背景层的.modal-backdrop div绑定点击关闭事件：

@if (showBackdrop)
{
    <div class="modal-backdrop fade show" @onclick="Close"></div>
}

（4）添加点击处理方法 #

在@code块中新增处理外层点击的方法：

private void HandleModalClick()
{
    Close();
}

修改后的完整弹窗组件代码 #

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;"
     @onclick="HandleModalClick">
    <div class="modal-dialog modal-lg" role="document" @onclick:stopPropagation="true">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Title</h5>
            </div>
            <div class="modal-body">
                @Body
            </div>
            <div class="modal-footer">
                @Footer
            </div>
        </div>
    </div>
</div>

@if (showBackdrop)
{
    <div class="modal-backdrop fade show" @onclick="Close"></div>
}

@code {
    [Parameter]
    public RenderFragment Title { get; set; }

    [Parameter]
    public RenderFragment Body { get; set; }

    [Parameter]
    public RenderFragment Footer { get; set; }

    private string modalDisplay = "none;";
    private string modalClass = "";
    private bool showBackdrop = false;

    public void Open()
    {
        modalDisplay = "block;";
        modalClass = "show";
        showBackdrop = true;
    }

    public void Close()
    {
        modalDisplay = "none";
        modalClass = "";
        showBackdrop = false;
    }

    private void HandleModalClick()
    {
        Close();
    }
}

2. 调用说明 #

你原来的调用方式保持不变，不需要额外添加取消按钮或关闭叉号：

<ModalPage @ref="_modal">
    <Title>Some title</Title>
    <Body>
        <div class="row">
            <div class="col">some number</div>
            <div class="col">@_model.SomeNumber</div>
        </div>
    </Body>
    <!-- 不需要Footer的话直接省略即可 -->
</ModalPage>

逻辑说明 #

• 点击弹窗内部区域（.modal-dialog范围内）：事件被阻止冒泡，不会触发关闭
• 点击弹窗外部区域（.modal的空白部分或.modal-backdrop背景层）：触发关闭方法，弹窗自动隐藏

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