场景:
我试图在整个屏幕上覆盖背景,但是当我打开模态背景时,从标题开始的位置不在模态背景下。如何覆盖整个屏幕的背景?
这是我的html代码:
<div class="modal fade" id="modalDetailFormalite" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="contact">Détails</h5>
<button type="button" class="close" aria-label="Close" onclick="hideModalDetailFormalite()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row" id="detailsFlows">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-common" id="btnAddToCardDocFlows" disabled="disabled">
<i class='fa fa fa-cart-plus' id="iconBtnAddToCardDocFlows"></i> Ajouter au panier
</button>
<button type="button" class="btn btn-secondary" id="btnCloseModalDetailFormalite" onclick="hideModalDetailFormalite()">Fermer</button>
</div>
</div>
</div>
</div>
这是我的JS代码:
function showModalDetailFormalite(_id, param) {
var dataFlows = JSON.parse(sessionStorage.getItem("flows")).formalites;
$.each(dataFlows, function (i, item) {
if (item._id === _id) {
var entityId = _id;
var docContent = false;
var content = "";
content += "<div class='col-12'>";
content += "<div class='table-responsive-sm content'>";
content += "<table class='table table-striped' id'tableDetailsFlows'>";
content += "<tbody id='checkAddToCartFormalite'>";
....
content += "</tbody>";
content += "</table>";
content += "</div>";
content += "</div>";
if (docContent) {
$("#btnAddToCardDocFlows").show();
$("#btnAddToCardDocFlows").attr("onclick", "addToCart(\"" + entityId + "\");");
} else {
$("#btnAddToCardDocFlows").hide();
}
$("#detailsFlows").html(content);
$("#modalDetailFormalite").modal({backdrop: 'static', keyboard: false, show: true});
}
});
}
Here is what the view looks like when I call my modal
帮帮我,谢谢你。
Go to the Modal Css codes and Change
position: fixed
instead ofposition:absolute
更改为此: