问blazor页面中引导模态的定位

EN

@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>
}