如何在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;
}
}

这将在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>

编辑：

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

<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>

原始答案：

我修改了你的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();
}
}

您还需要在index.html(或_Layout.cshtml(:中添加此脚本

<script>
window.initModal = function (dotNetHelper) {
document.querySelector('.modal').addEventListener('click', function (e) {
// Check if the modal is clicked, not an element inside the modal:
if (e.target === e.currentTarget) {
dotNetHelper.invokeMethodAsync('Close');
}
});
};
</script>

BlazorFiddle

检测点击引导模式背景

相关内容

最新更新

热门标签：