jquery - 隐藏的 Bootstrap 模态向 html 正文添加了 padding-right

Question

我按以下顺序隐藏和显示模态:

当我点击导入按钮时，它将以 id="import-actionpopup" 为目标模式，然后我有另外两个按钮追加，并在我上传文件时覆盖并选择选项然后这个 import-actionpopup 将被关闭，然后我有另外两个带有 id="warningOverrideAction" 的模态将在 overrideButton 上打开按钮点击和其他带有 id="appendAction" 的模态将在 appendButton 点击时打开。

现在，当我隐藏 warningOverrideAction 或 appendAction 模式时，它会自动添加 padding-right:17px;对我的 body 。

当我在 stackoverflow 上搜索时，我发现这是 bootstrap.css 中的一个故障，但我的问题是即使在模式被隐藏之后填充仍然存在。。 p>

 $(document).ready(function(){

        $("#appendButton,#overrideButton").click(function(event){
            path=document.getElementById("zapper").value;
            if(path){       
             if($('#hinkSelect option:selected').prop('disabled') == true){
                   $('#reportError').modal('show');
                   document.getElementById('uploadError').innerHTML="<center>You have not selected any tool. <br>Make sure to select one tool.</center>";
                   document.getElementById('error_title').innerHTML="File Upload Error";
                  }
                  else{
                      toolName=document.getElementById('hinkSelect').value;
                      $('#import-actionpopup').modal('hide');
                      if(event.target.id==='overrideButton')
                      $('#warningOverrideAction').modal('show');
                      else if(event.target.id==='appendButton')
                      $('#appendAction').modal('show');
                      document.getElementById('hinkSelect').value='';
                  }
            }
            else{
                $('#reportError').modal('show');
                document.getElementById('uploadError').innerHTML="<center>You have not uploaded a zip file. <br>Make sure to upload a Zip file and try again.</center>";
                document.getElementById('error_title').innerHTML="File Upload Error";
            }
        });
    });
    function uploadScore(action){
            $("#appendAction").modal("hide");
            $("#warningOverrideAction").modal("hide");
            showPleaseWait();

            var baseUrl =url;
        $.ajax() calls-->                   
                    success: function(dataset){
                        if(dataset.error!=null){
                        $("#pleaseWaitDialog").modal("hide");

                        $('#reportError').modal('show');

                         document.getElementById('uploadError').innerHTML="<center>"+dataset.error+"</center>";
                         document.getElementById('error_title').innerHTML="Score Upload Failure";
                        }
                        else{
                        location.reload(true);
                        }
                    },

                    error : function(e){
                        console.log(e);
                    }
                });

            }

    function showPleaseWait() {
        var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\<div class="modal-dialog">\<div class="modal-content">\<div class="modal-header" style="background-color:rgba(0,0,0,0.4);">\<h4 class="modal-title" style="color:black">Please wait while we import all your scores details...</h4>\</div>\<div class="modal-body" style="background-color:rgba(0,0,0,0.4);">\<img src="${pageContext.request.contextPath}/resources/images/spinner.gif" style="display: block; margin-left: auto; margin-right: auto;"/>\</div>\</div>\</div>\</div>';
        $(document.body).append(modalLoading);
        $("#pleaseWaitDialog").modal("show");
    }

如果有解决方法请帮忙

Answer 1

仅使用 css:如果您使用单模态(不使用多模态，我的意思是不在另一个模态之上使用模态)

.modal-open{
    overflow: auto;
    padding-right:0 !important;
}

同时使用 css 和 jquery 脚本:如果您使用多个模态，我的意思是在另一个模态上使用模态)。注意:在jquery文件后添加jquery脚本

.modal-open{
        overflow: auto;
        padding-right:0 !important;
    }


$(document).on('show.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});

$(document).on('hide.bs.modal', '.modal', function () {
     $("body").css("padding-right","0");
});