Bootstrap 4 在blazor客户端中显示模式对话框
我知道和,但我不希望有一个特定的组件仅仅用于显示模态(缺乏灵活性),我希望自己在各种组件中实现代码 下面是一个非常简单的代码来显示示例模态:Bootstrap 4 在blazor客户端中显示模式对话框,bootstrap-4,blazor,Bootstrap 4,Blazor,我知道和,但我不希望有一个特定的组件仅仅用于显示模态(缺乏灵活性),我希望自己在各种组件中实现代码 下面是一个非常简单的代码来显示示例模态: @page "/fetchdata" <button class="btn btn-primary" @onclick="@(() => { showModal = true; })">Show Dialog!</button> @if (showModal) { <div class="modal-backdrop
@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;
}
@page”/fetchdata
显示对话框!
@如果(显示模式)
{
情态标题
&时代;
模态体文本在这里
保存更改
接近
}
天气预报
此组件演示如何从服务器获取数据
@代码{
bool-showModal=false;
}
代码正常,但不透明度存在问题:
将style=“opacity:1;”“
放在
上也不能解决问题(尽管给出不透明度,但小于1的值会使其更透明!)
问题的原因是什么以及如何解决?不要直接使用模式背景。使用简单模态。模态背景是框架应用于背景内容的内容。右键单击对话框元素并检查它。看看不透明度的计算样式,它会告诉你css的哪个部分是半透明的。你可以使用这个Nuget软件包:它也支持背景和动画。。。你的建议解决了模式窗口的不透明度问题,但是我怎样才能使背景更暗呢(模式背景效果)?但是背景有一个额外的div