bootstrap 模态在 blazor 页面中的定位

Question

我是网络编码领域的新手，所以如果有一些我不知道的明显错误，我很抱歉。我正在挑战自己在我正在从事的玩具项目中使用模态，但我遇到了一些麻烦

如您所见，我的模态根本不是模态。它只是出现在网格下面。

@page "/"

<PageTitle>Index</PageTitle>

<div>
    <div>
        <h1 id="impListH">TestApp</h1> <button id="impListB" class="btn btn-primary" @onclick="@(() => { showModal = true; })" >Importa</button>
    </div>
    <br />
    <br />
    <DataGrid TItem="Employee" MySource="employees" Columns="columnDefinitions"></DataGrid>
</div>

@if (showModal)
{
    <div class="modal-dialog" tabindex="-1" role="dialog" style="display: initial;" id="myModal">
        <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>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnes enim iucundum motum, quo sensus hilaretur.
                        <i>Quis istud possit, inquit, negare?</i>
                        <mark>Ego vero isti, inquam, permitto.</mark> Duo Reges: constructio interrete.
                    </p>
                    <FetchData />
                    <dl>
                        <dt><dfn>Stoici scilicet.</dfn></dt>
                        <dd>An hoc usque quaque, aliter in vita?</dd>
                        <dt><dfn>Erat enim Polemonis.</dfn></dt>
                        <dd>Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim.</dd>
                    </dl>
                </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>
}

我跟着建立了模型。我真的不明白哪里出了问题。你能帮帮我吗？

Answer 1

用<div class="modal" tabindex="-1">包裹你div.modal-dialog我也认为你有两倍的div.modal-dialog

Answer 2

每 Bootstrap's Modal Documentation

您的根 div 应该使用 class modal 而不是 modal-dialog。以下更改应该可以解决您的问题：

@if (showModal)
{
    <div class="modal" tabindex="-1" role="dialog" style="display: initial;" id="myModal">
        <div class="modal-dialog" role="document">

bootstrap 模态在 blazor 页面中的定位

Positioning of bootstrap modal in blazor page

bootstrap-modal

blazor