我在网络编码领域相当陌生,所以如果有一些我不知道的明显错误,我很抱歉。我正在挑战自己在我正在开发的玩具项目中使用模态,但我遇到了一些麻烦
如你所见,我的模态根本不是模态。它只是出现在网格下方。
@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">×</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>
}
我按照这个答案来构建模型。我真的不明白出了什么问题。你能帮我吗?
用
div.modal-dialog
包裹你<div class="modal" tabindex="-1">
我也认为你有双重div.modal-dialog
您的根 div 应使用类
modal
而不是 modal-dialog
。
以下更改应该可以解决您的问题:
@if (showModal)
{
<div class="modal" tabindex="-1" role="dialog" style="display: initial;" id="myModal">
<div class="modal-dialog" role="document">