Bootstrap Modals在关闭

时间：2015-09-30 09:20:35

标签： javascript jquery html css twitter-bootstrap

我正在使用bootstrap和Parse框架来构建一个小型webapp。但是那些Bootstrap模态在关闭后不断向正文添加填充。怎么解决这个问题？

我尝试将此代码放入我的javascript：

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


但它不起作用。有人知道如何解决这个问题吗？

我的代码： 

        <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button>

         <div id="loginModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-sm">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body text-center" >
                          <input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
                          <input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="loginButton" ng-click="goToAdminPanel()">Login</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
                      </div>

                    </div>

                 </div>
                </div>
           </div>

        <div id="adminPanel" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Admin Panel</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body" >

                        </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="saveButton">Save</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>



                    </div>

                 </div>
                </div>
           </div>



    $scope.goToAdminPanel = function(){
    Parse.User.logIn($scope.username,$scope.password,{
        success: function(user){
            $('#loginModal').modal('hide');
            $('#adminPanel').modal();
        },
        error: function(user, error) {
            alert('Wrong username and/or password');
        }
    });
}

我正在使用bootstrap和Parse框架来构建一个小型webapp。但是那些Bootstrap模态在关闭后不断向正文添加填充。怎么解决这个问题？

33 个答案:

答案 0 :(得分：96)

我刚刚使用了下面的css修复程序，它正在为我工​​作

body { padding-right: 0 !important }

答案 1 :(得分：48)

只需添加这样的风格：

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

答案 2 :(得分：47)

这可能是Bootstrap模式的一个小故障。从我的测试来看，似乎问题是#adminPanel正在被初始化，而#loginModal尚未完全关闭。解决方法可以通过删除fade上的#adminPanel类和#loginModal来删除动画，或者在调用$('#adminPanel').modal();之前设置超时（~500ms）。希望这会有所帮助。

答案 3 :(得分：12)

如果您更关心padding-right相关的事情，那么您可以这样做

<强>的jQuery ：

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

这将addClass发送到body，然后使用此

<强> CSS ：

.test[style] {
     padding-right:0 !important;
 }

这将帮助您摆脱padding-right。

但如果你也担心隐藏scroll，那么你也要加上这个：

<强> CSS ：

.test.modal-open {
    overflow: auto;
 }

这是JSFiddle

请看一下，它会为你做到这一点。

答案 4 :(得分：11)

只需打开bootstrap.min.css

即可

找到这一行（默认）

.modal-open{overflow:hidden;}

并将其更改为

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

它适用于网站的每个模式。你可以做溢出：auto;如果你想在打开模态对话框的同时保持滚动条。

答案 5 :(得分：10)

我有很长一段时间遇到同样的问题。这里的答案都没有奏效！但以下修好了！

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

关闭模态时会触发两个事件，首先是hide.bs.modal，然后是hidden.bs.modal。你应该只能使用一个。

答案 6 :(得分：8)

一种纯css解决方案，可以保持引导功能。 

body:not(.modal-open){
  padding-right: 0px !important;
}

问题是由bootstrap jQuery中的一个函数引起的，当一个模态窗口打开时，如果页面上有一个滚动条，它会添加一些填充权限。当模态打开时，这会阻止您的身体内容移动，这是一个很好的功能。但它导致了这个错误。

此处给出的许多其他解决方案都会破坏该功能，并使您的内容在模式打开时稍微改变一下。此解决方案将保留引导模式的功能，而不是移动内容，但修复错误。

答案 7 :(得分：2)

我刚刚删除了fade类，并使用animation.css更改了类淡入淡出效果。我希望这会有所帮助。

答案 8 :(得分：2)

轻松修复

添加此课程

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

它是一个覆盖，但有效

答案 9 :(得分：2)

removeAttr您将无法删除CSS属性： 

        $('.modal').on('hide.bs.modal', function (e) {
            e.stopPropagation();
            $('body').css('padding-right','');
        });

如果没有属性值，则删除该属性。

答案 10 :(得分：1)

只需从按钮中删除data-target并使用jQuery加载模态。 

<button id='myBtn' data-toggle='modal'>open modal</button>

jQuery的：

$("#myBtn").modal('show');

答案 11 :(得分：1)

使用Bootstrap 4可以为我工作：

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

答案 12 :(得分：1)

我正在加载默认的Bootstrap 3.3.0 CSS，并且遇到了类似的问题。 通过添加以下CSS来解决：

body.modal-open { overflow:inherit; padding-right:inherit !important;}

！之所以重要，是因为引导模态javascript以编程方式向右侧添加了15px的填充。我的猜测是要补偿滚动条，但我不希望这样做。

答案 13 :(得分：1)

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

答案 14 :(得分：1)

我知道这是一个老问题，但是这里的答案都没有解决我类似情况下的问题，我认为对于一些开发人员来说也是有用的。

我打算在打开模态时在主体中添加一些CSS，在仍然使用bootstrap 3的网站中。

body.modal-open{
            padding-right: 0!important;
            overflow-y:scroll;
            position: fixed;
        }

答案 15 :(得分：1)

我的解决方案不需要任何额外的CSS。

正如@Orland指出的那样，当另一个事件开始时，一个事件仍在发生。我的解决方案是在第一个事件（显示adminPanel模态）仅在第一个事件完成时显示（隐藏loginModal模态）。

您可以通过将监听器附加到hidden.bs.modal模式的loginModal事件来完成此操作，如下所示：

$('#loginModal').on('hidden.bs.modal', function (event) {
    $('#adminPanel').modal('show');
}

并且，必要时，只需隐藏loginModal模态。

$('#loginModal').modal('hide');

您可以在侦听器中实现自己的逻辑，以决定是否显示adminPanel模态。

您可以获得有关Bootstrap模态事件here的更多信息。

祝你好运。

答案 16 :(得分：1)

如果身体溢出，Bootstrap模型会向身体添加填充。

在bootstrap 3.3.6（我正在使用的版本）上，这是负责将padding-right添加到body元素的函数： https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js/bootstrap.js#L1180

快速解决方法是在调用bootstrap.js文件后简单地覆盖该函数：

$.fn.modal.Constructor.prototype.setScrollbar = function () { };

这解决了我的问题。

答案 17 :(得分：0)

当您打开一个先前模态尚未完全关闭的模态时，会发生这种情况。要修复它，只需在所有模态完全关闭时打开新模态，请检查以下代码：

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

答案 18 :(得分：0)

我现在已经很老了，这里提供的所有解决方案都可能有效。我只是添加一些新内容以防他人使用：我遇到了同样的问题，并注意到打开模式已为我的sidenav添加了一个margin-right（可能是从添加到body的padding的一种继承）。在我的sidenav中添加{margin-right：0！important;}可以达到目的。

答案 19 :(得分：0)

这对我有用：

body.modal-open {
    overflow: auto !important;
}

// Bootstrap uses JS to set the element style so you can
// override those styles like this
body.modal-open[style] {
    padding-right: 0px !important;
}

答案 20 :(得分：0)

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

试试这个

在模态关闭后，它会将填充右0px添加到正文中。

答案 21 :(得分：0)

tinyMCE.activeEditor.getContent({format : 'raw'});

为我工作。请注意，滚动条强制在体内 - 但如果你有一个＆＃34;滚动＆＃34;无论如何，它并不重要（？）

答案 22 :(得分：0)

我使用模态和ajax时遇到了同样的问题。这是因为JS文件在第一页和ajax调用的页面中都被引用了两次，所以当modal关闭时，它调用两次JS事件，默认情况下，添加一个17px的填充权。

答案 23 :(得分：0)

这是一个bootstrap错误，已在v4-dev中修复：https://github.com/twbs/bootstrap/pull/18441 直到那时加入CSS课程应该有所帮助。

.fixed-padding {
  padding-right: 0px !important;
}

答案 24 :(得分：0)

我对Bootstrap 3.3.7和我的固定导航栏解决方案有同样的问题：将此样式添加到自定义CSS。

.modal-open {
    padding-right: 0px !important;
    overflow-y: scroll;
}

当滚动窗口仍在工作时，它会使你的模态显示出来。 谢谢，希望这对你也有帮助

答案 25 :(得分：0)

这可以解决问题

.shop-modal.modal.fade.in {
    padding-right: 0px !important;
}

答案 26 :(得分：0)

我深入研究了bootstrap javascript，发现Modal代码在名为{ 'firstId' : 1, 'secondId' : 1 }的函数中设置了正确的填充，该函数在Modal原型上定义并在jQuery上公开。将以下代码放在某处以覆盖此功能以便不执行任何操作对我而言（虽然我不知道未设置此功能的后果是什么!!）

adjustDialog()

答案 27 :(得分：-1)

正如@Orland所说，如果你正在使用像淡入淡出这样的效果那么我们需要在显示模态之前等待，这有点hacky但是会做到这一点。

function defer(fn, time) {
    return function () {
        var args = arguments,
            context = this;

        setTimeout(function () {
            fn.apply(context, args);
        }, time);
    };
}

$.fn.modal.Constructor.prototype.show = defer($.fn.modal.Constructor.prototype.show, 350);

答案 28 :(得分：-1)

（Bootstrap v3.3.7） 在我的浏览器检查器中，我看到这是直接在元素 style 属性中设置的，这会覆盖类属性。

当模式显示时，我尝试'重置' paddig-right 值：

$("#myModal").on('shown.bs.modal', function(){
    $(this).css({paddingRight:""});
});

但是一旦窗口调整大小就会恢复:(可能来自插件脚本）。

这个解决方案对我有用：

var modal_needfix=true;
$("#myModal").on('shown.bs.modal', function(){
    var modalscope=$(this);
    modalscope.css({paddingRight:""});
    if(modal_needfix){
        window.addEventListener("resize",function(){
            requestAnimationFrame(function(){// be sure to act after the pluggin script
                modalscope.css({paddingRight:""});
            });
        });
        modal_needfix=false;
    }
});

答案 29 :(得分：-2)

这应解决问题

1

答案 30 :(得分：-2)

我尝试了很多东西，但对我来说工作很小。

    body {
    font-size: 12px;
    font-family: brownFont;
    padding-right: 0 !important ;
}

答案 31 :(得分：-2)

我希望还有人需要这个答案。在bootstrap.js中有一个名为resetScrollbar（）的函数，由于某些愚蠢的原因，开发人员决定将滚动条尺寸添加到正文的填充右侧。所以从技术上讲，如果你只是将右边填充设置为空字符串，它将解决问题

答案 32 :(得分：-5)

将绝对位置设置为正文：

set(foo "R\"#?#:#?#(${foo})#?#:#?#\"")

因此填充物不会再影响身体。

相关问题
最新问题