如何在整个屏幕上覆盖Bootstrap模态背景?

场景:

我试图在整个屏幕上覆盖背景,但是当我打开模态背景时,从标题开始的位置不在模态背景下。如何覆盖整个屏幕的背景?

这是我的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

帮帮我,谢谢你。

评论
  • 小呆呱er
    小呆呱er 回复

    Go to the Modal Css codes and Change position: fixed instead of position:absolute

    .ng-modal-overlay {position:absolute}
    

    更改为此:

    .ng-modal-overlay {position:fixed}