저는 부트 스트랩과 Parse 프레임 워크를 사용하여 작은 웹앱을 구축하고 있습니다. 그러나 이러한 부트 스트랩 모달은 닫은 후에도 몸체에 패딩을 계속 추가합니다. 이것을 해결하는 방법?
이 코드를 내 자바 스크립트에 넣으려고했습니다.
$('.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">×</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');
}
});
}
저는 부트 스트랩과 Parse 프레임 워크를 사용하여 작은 웹앱을 구축하고 있습니다. 그러나 이러한 부트 스트랩 모달은 닫은 후에도 몸체에 패딩을 계속 추가합니다. 이것을 해결하는 방법?
답변
이것은 Bootstrap 모달의 결함 일 수 있습니다. 내 테스트에서 문제는 아직 완전히 닫히지 않은 #adminPanel상태에서 초기화되는 것 같습니다 #loginModal. 해결 방법은 제거하여 애니메이션을 제거 할 수 있습니다 fade에 클래스를 #adminPanel하고 #loginModal호출하기 전에 설정하거나 제한 시간 (~ 500ms로) $('#adminPanel').modal();. 도움이 되었기를 바랍니다.
답변
나는 방금 아래 CSS 수정을 사용했으며 나를 위해 일하고 있습니다.
body { padding-right: 0 !important }답변
.modal-open {
padding-right: 0px !important;
}
방금 변경
.modal {
padding-right: 0px !important;
}
답변
부트 스트랩 기능을 그대로 유지하는 순수한 CSS 솔루션입니다.
body:not(.modal-open){
padding-right: 0px !important;
}
이 문제는 페이지에 스크롤 막대가있는 경우 모달 창이 열릴 때 약간의 패딩을 추가하는 부트 스트랩 jQuery의 함수로 인해 발생합니다. 그것은 모달이 열릴 때 신체 내용이 이동하는 것을 막고 멋진 기능입니다. 하지만이 버그가 발생합니다.
여기에 제공된 다른 많은 솔루션은 해당 기능을 중단하고 모달이 열릴 때 콘텐츠를 약간 이동시킵니다. 이 솔루션은 콘텐츠를 이동하지 않고 부트 스트랩 모달의 기능을 유지하지만 버그를 수정합니다.
답변
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이 있습니다.
봐주세요, 당신을 위해 트릭을 할 것입니다.
답변
bootstrap.min.css를여십시오.
이 줄 찾기 (기본값)
.modal-open{overflow:hidden;}다음과 같이 변경하십시오.
.modal-open{overflow:auto;padding-right:0 !important;}사이트의 모든 모달에서 작동합니다. overflow : auto; 할 수 있습니다. 모달 대화 상자를 여는 동안 스크롤바를 그대로 유지하려는 경우.
답변
나는 아주 오랫동안 이와 같은 문제를 겪었습니다. 여기에 대한 답변 중 어느 것도 작동하지 않았습니다! 그러나 다음은 그것을 고쳤습니다!
$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
$('body').css('padding-right','0');
});
모달을 닫을 때 발생하는 두 가지 이벤트가 있습니다. 첫 번째 hide.bs.modal는이고 다음은 hidden.bs.modal. 하나만 사용할 수 있어야합니다.
