Bootstrap Modals在关闭后继续向主体添加填充 [英] Bootstrap Modals keep adding padding-right to body after closed
问题描述
我正在使用bootstrap和Parse框架来构建一个小型webapp。但是那些Bootstrap模态在关闭后不断向正文添加填充。如何解决这个问题?
I am using bootstrap and Parse framework to build a small webapp. But those Bootstrap modals keep adding padding-right to body after closed. How to solve this?
我试着把这段代码放在我的javascript中:
I tried to put this code in my javascript:
$('.modal').on('hide.bs.modal', function (e) {
$("element.style").css("padding-right","0");
});
但它不起作用。有人知道如何解决这个问题吗?
But it doesn't work. Does anybody know how to fix this?
我的代码:
My code:
<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">×</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">×</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模态在关闭后不断向正文添加填充。如何解决这个问题?
I am using bootstrap and Parse framework to build a small webapp. But those Bootstrap modals keep adding padding-right to body after closed. How to solve this?
推荐答案
我刚刚使用了下面的css修复程序,它正在为我工作
I have just used the css fix below and it is working for me
body { padding-right: 0 !important }
这篇关于Bootstrap Modals在关闭后继续向主体添加填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!