我知道 Blazored Modal和 this answer ,但我不想有一个特定的组件只是为了显示模态(缺乏灵活性),并希望自己在各种组件中实现代码。
这是一个非常简单的代码来显示示例模式:
@page "/fetchdata"
<button class="btn btn-primary" @onclick="@(() => { showModal = true; })">Show Dialog!</button>
@if (showModal)
{
<div class="modal-backdrop fade show" tabindex="-1" role="dialog" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
<hr />
<h1>Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p>
@code {
bool showModal = false;
}
该代码有效,但不透明度有问题:
推杆
style="opacity:1;"
在 <div class="modal-dialog" role="document">
也没有解决问题(尽管给出 opacity
,低于 1 的值使它更透明!)问题的原因是什么以及如何解决?
最佳答案
不要直接使用 modal-backdrop 。使用简单的模态。 modal-backdrop 是框架应用于背景内容的内容。
关于bootstrap-4 - 在 blazor 客户端中显示模态对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62362370/