如何在不使用十字按钮的情况下关闭 Blazor 中的弹出窗口？

Question

如何在不使用十字按钮的情况下关闭 Blazor 中的弹出窗口？

在我的 Blazor 项目中，我使用弹出窗口。

我想通过单击弹出窗口旁边的来关闭弹出窗口。
我的弹出窗口上没有十字。
我不想使用“取消”按钮。

你是怎样做的？

这是弹出窗口：

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display:@modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document" >
        <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"></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;
    }
}

Run Code Online (Sandbox Code Playgroud)

...这将在 Razor 页面中调用。

<ModalPage @ref="_modal">
    <Title>Some title</Title>
    <Body>
        <div class="row">
            <div class="col">some number</div>
            <div class="col">@_model.SomeNumber</div>
        </div>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Dim*_*kos 6

编辑：

有一个更好的解决方案，不需要使用任何 JavaScript。只需在元素@onclick上添加事件.modal，然后在元素@onclick:stopPropagation上添加事件.modal-dialog，这样模式对话框内的单击就不会触发父级上的单击事件：

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display: @modalDisplay; overflow-y: auto;"
     @onclick="Close">
    <div class="modal-dialog modal-lg" role="document" @onclick:stopPropagation="true">
        ...
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

原答案：

我修改了您的ModalPage组件，以便当用户单击模式之外的任何位置时它会关闭：

@inject IJSRuntime JS
@implements IDisposable

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display: @modalDisplay; overflow-y: auto;">
    <div class="modal-dialog modal-lg" role="document" >
        <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"></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;

    private DotNetObjectReference<ModalPage> _selfRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _selfRef = DotNetObjectReference.Create(this);
            await JS.InvokeVoidAsync("initModal", _selfRef);
        }
    }

    public void Open()
    {
        modalDisplay = "block";
        modalClass = "show";
        showBackdrop = true;
    }
    
    [JSInvokable]
    public void Close()
    {
        modalDisplay = "none";
        modalClass = "";
        showBackdrop = false;

        StateHasChanged();
    }

    public void Dispose()
    {
        _selfRef.Dispose();
    }
}

Run Code Online (Sandbox Code Playgroud)

您还需要在index.html（或_Layout.cshtml）内添加此脚本：

<div class="modal @modalClass" 
     tabindex="-1" role="dialog" 
     style="display: @modalDisplay; overflow-y: auto;"
     @onclick="Close">
    <div class="modal-dialog modal-lg" role="document" @onclick:stopPropagation="true">
        ...
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

布拉佐小提琴

检测引导模式背景上的点击

归档时间：	3 年，5 月前
查看次数：	1498 次
最近记录：	2 年，12 月前