在我的 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>
关于c# - 如何在不使用十字按钮的情况下关闭 Blazor 中的弹出窗口？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73947310/