在 Blazor 客户端中显示模式对话框

Question

我知道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">&times;</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 的值会使其更透明！）

问题的原因是什么以及如何解决？

Answer 1

不要直接使用模态背景。使用简单的模态。 modal-backdrop 是框架应用于背景内容的内容。