我已经直接从Bootstrap示例中使用了我的模态代码，并且只包括Bootstrap .js(而不是Bootstrap -modal.js)。但是，我的模态出现在灰色渐隐(背景)下面，是不可编辑的。
这是它的样子:
这是重现这个问题的一种方法。该代码的基本结构是这样的:
<body>
<p>Lorem ipsum dolor sit amet.</p>
<div class="my-module">
This container contains the modal code.
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">Modal</div>
</div>
</div>
</div>
</div>
</body>
body {
padding-top: 50px;
}
.my-module {
position: fixed;
top: 0;
left: 0;
}
你知道为什么会这样吗或者我能做些什么来弥补吗?
@Muhd提供的解决方案是最好的方法。但如果你陷入了无法更改页面结构的情况，可以使用以下技巧:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
这里的技巧是data- background ="false" style="background-color: rgba(0, 0, 0, 0.5);"通过删除默认背景并通过设置对话框本身的背景色来创建一个虚拟背景。
更新1:
正如@Gustyn指出的那样，点击背景并不能像预期的那样关闭对话框。为了实现这个，你必须添加一些java脚本代码。这里有一些例子，你可以实现这一点。
$('.modal').click(function(event){
$(event.target).modal('hide');
});
更新:原来的JS方法导致了我的模态的多个克隆
如果组件被初始化多次，则附加到主体。相反，首先确认模式不是
已经添加:
function AttachModalsToBody(modalID) {
var modal = $("body").children('#' + modalID);
if ($("body").children('#' + modalID).length == 0) {
$('#' + modalID).appendTo("body");
}
}
在Blazor(在那里我使用Bootstrap 5.0)，我做了以下(改编自@AdamAlbright的回答)，以防止模式出现在背景后面:
在我的项目中，每个模态都在自己独立的组件中，因为我需要从其他组件中设置它们的参数，显然不可能将模态移动到这些父组件之外。因此，当它第一次呈现时，我使用JS Interop将每个模态附加到主体。
例如:MyModal.razor
在每个模态/组件内部:
@inject IJSRuntime jsRuntime
<!--HTML Section omitted for brevity-->
@code{
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await jsRuntime.InvokeVoidAsync("AttachModalToBody", "#myModalID");
}
}
在JS文件中:
function AttachModalToBody(modalID) {
$(modalID).appendTo("body");
}
