如何实现点击外部关闭Blazor WebAssembly模态框？

针对你的Blazor WebAssembly模态框组件，只需对现有代码做几处关键修改，即可实现点击背景遮罩、弹窗外部空白区域关闭弹窗的功能，同时保留点击弹窗内容不关闭的交互逻辑：

修改后的完整代码 #

@using System.Threading.Tasks;

@if (IsVisible)
{
    <!-- 点击背景遮罩关闭弹窗 -->
    <div class="modal-backdrop fade show" @onclick="Close"></div>
    <!-- 点击弹窗外部空白区域关闭弹窗 -->
    <div id="myModal" class="modal show" style="display: block" @onclick="Close">
        <!-- 阻止内部点击事件冒泡，避免点击弹窗内容误触发关闭 -->
        <div class="modal-dialog" role="document" @onclick:stopPropagation>
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@Title</h5>
                    <button @onclick="() => Close()" type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    @ChildContent
                </div>
            </div>
        </div>
    </div>
}

@code {
   [Parameter]
    public bool IsVisible { get; set; }

    [Parameter]
    public string Title { get; set; }

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

    [Parameter]
    public EventCallback<bool> IsVisibleChanged { get; set; }

    public async Task Close()
    {
        IsVisible = false;
        await IsVisibleChanged.InvokeAsync(IsVisible);
    }
}

关键修改点 #

• 给modal-backdrop元素添加@onclick="Close"：点击背景遮罩时直接触发关闭逻辑。
• 给外层modal容器添加@onclick="Close"：处理点击弹窗外部空白区域的关闭需求。
• 给modal-dialog元素添加@onclick:stopPropagation：阻止弹窗内部的点击事件向上冒泡到外层modal容器，确保点击弹窗内容时不会触发关闭。
• 修正了modal容器的id（移除多余空格）：避免后续元素查找可能出现的问题。

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