我是 html 的新手,正在尝试实现引导模式对话框,但模式背景(不确定确切名称)出现在它的左侧,我该如何解决这个问题
我已经尝试过这些:
$('#exampleModalLong').appendTo($('body'));
这是我的模态:
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-dialog-centered" role="document" id="modalDocument">
<div class="modal-content" id="modalContent">
<div class="modal-header" id="modalHeader">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
我用模态配置的 CSS :
#exampleModalLong {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
width: 75%;
height: 75%;
background: aqua;
z-index: 1;
}
显示模态的方法:
function displayModel(message) {
$('#exampleModalLong').modal('show')
}
请帮我解决这个问题
由于您为模态设置的 CSS,模态背景似乎出现在模态的左侧。
您可以尝试将模态框固定在视口内,而不是绝对定位模态框。您可以尝试使用以下 CSS 作为模态:
#exampleModalLong {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
}
这会将模式定位在视口的中心并将
z-index
设置为比背景更高的值。这应该确保背景在模态后面。
此外,请确保您已在 HTML 代码中正确包含 Bootstrap CSS 和 JavaScript 文件。
如果这对您有用,请接受答案。