부트 스트랩 모달은 닫은 후에도 몸에 패딩을 계속 추가합니다.

부트 스트랩 모달은 닫은 후에도 몸에 패딩을 계속 추가합니다.

---

저는 부트 스트랩과 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">&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');
        }
    });
}

저는 부트 스트랩과 Parse 프레임 워크를 사용하여 작은 웹앱을 구축하고 있습니다. 그러나 이러한 부트 스트랩 모달은 닫은 후에도 몸체에 패딩을 계속 추가합니다. 이것을 해결하는 방법?

---

이것은 Bootstrap 모달의 결함 일 수 있습니다. 내 테스트에서 문제는 아직 완전히 닫히지 않은 #adminPanel상태에서 초기화되는 것 같습니다 #loginModal. 해결 방법은 제거하여 애니메이션을 제거 할 수 있습니다 fade에 클래스를 #adminPanel하고 #loginModal호출하기 전에 설정하거나 제한 시간 (~ 500ms로) $('#adminPanel').modal();. 도움이 되었기를 바랍니다.

---

나는 방금 아래 CSS 수정을 사용했으며 나를 위해 일하고 있습니다.

body { padding-right: 0 !important }

---

다음과 같은 스타일을 추가하면됩니다.

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

---

bootstrap.min.css를여십시오.

이 줄 찾기 (기본값)

.modal-open{overflow:hidden;}

다음과 같이 변경하십시오.

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

사이트의 모든 모달에서 작동합니다. overflow : auto; 할 수 있습니다. 모달 대화 상자를 여는 동안 스크롤바를 그대로 유지하려는 경우.

---

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이 있습니다.

봐주세요, 당신을 위해 트릭을 할 것입니다.

---

부트 스트랩 기능을 그대로 유지하는 순수한 CSS 솔루션입니다.

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

이 문제는 페이지에 스크롤 막대가있는 경우 모달 창이 열릴 때 약간의 패딩을 추가하는 부트 스트랩 jQuery의 함수로 인해 발생합니다. 그것은 모달이 열릴 때 신체 내용이 이동하는 것을 막고 멋진 기능입니다. 하지만이 버그가 발생합니다.

여기에 제공된 다른 많은 솔루션은 해당 기능을 중단하고 모달이 열릴 때 콘텐츠를 약간 이동시킵니다. 이 솔루션은 콘텐츠를 이동하지 않고 부트 스트랩 모달의 기능을 유지하지만 버그를 수정합니다.

---

나는 아주 오랫동안 이와 같은 문제를 겪었습니다. 여기에 대한 답변 중 어느 것도 작동하지 않았습니다! 그러나 다음은 그것을 고쳤습니다!

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

모달을 닫을 때 발생하는 두 가지 이벤트가 있습니다. 첫 번째 hide.bs.modal는이고 다음은 hidden.bs.modal. 하나만 사용할 수 있어야합니다.

---

쉬운 수정

이 수업 추가

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

재정의이지만 작동합니다.

---

I just removed the fade class and change the class fade effect with animation.css. I hope this will help.

---

removeAttr won't work you will to remove the CSS property like this:

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

With no property value, the property is removed.

---

Just remove the data-target from the button and load the modal using jQuery.

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

jQuery:

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

---

I have same problem with Bootstrap 3.3.7 and my solution for fixed navbar: Adding this style to your custom css.

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

it will make your modal showed while scroll window still working. thanks, hope this will help you too

---

I know this is an old question, but none of the answers from here removed the problem in my similar situations and I thought it would be useful for some developers to read my solution too.

I use to add some CSS to the body when a modal is opened, in the websites where it is still used bootstrap 3.

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

---

My solution does not require any additional CSS.

As pointed by @Orland, one event is still happening when the other starts. My solution is about starting the second event (showing the adminPanel modal) only when the first one is finished (hiding the loginModal modal).

You can accomplish that by attaching a listener to the hidden.bs.modal event of your loginModal modal like below:

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

And, when necessary, just hide the loginModal modal.

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

Of couse you can implement your own logic inside the listener in order to decide to show or not the adminPanel modal.

You can get more info about Bootstrap Modal Events here.

Good luck.

---

Bootstrap models add that padding-right to the body if the body is overflowing.

On bootstrap 3.3.6 (the version I'm using) this is the function responsible for adding that padding-right to the body element: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js/bootstrap.js#L1180

A quick workaround is to simply overwrite that function after calling the bootstrap.js file:

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

This fixed the issue for me.

---

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

---

This is what worked for me:

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;
}

---

I'm loading the default bootstrap 3.3.0 CSS and had a similar problem. Solved by adding this CSS:

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

The !important is because bootstrap modal javascript adds 15px of padding to the right programatically. My guess is that it's to compensate for the scrollbar, but I do not want that.

---

With Bootstrap 4 this worked for me:

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

---

I dug into the bootstrap javascript and found that the Modal code sets the right padding in a function called adjustDialog() which is defined on the Modal prototype and exposed on jQuery. Placing the following code somewhere to override this function to do nothing did the trick for me (although I don't know what the consequence of not setting this is yet!!)

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

---

This can solve the problem

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

---

This is a bootstrap bug and fixed in v4-dev: https://github.com/twbs/bootstrap/pull/18441 till then adding below CSS class should help.

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

---

I had that same problem using modals and ajax. It was because the JS file was referenced twice, both in the first page and in the page called by ajax, so when modal was closed, it called the JS event twice that, by default, adds a padding-right of 17px.

---

body {
    padding-right: 0 !important;
    overflow-y: scroll!important;
}

Worked for me. Note that the Scrollbar is forced in body - but if you have a "scrolling" page anyways, it doesn't matter (?)

---

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

Try this

It will add the padding right 0px to the body after the modal close.

---

It occurs when you open a modal that previous modal is not completely closed yet. To fix it just open new modal at the time that all modal are completely closed, check codes below:

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

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

---

(Bootstrap v3.3.7) From my browser inspector i saw that this is directly set in the element style property, witch overrides class properties.

I tryed to 'reset' the paddig-right value when the modal is showing with :

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

But it comes back as soon as the window is resized :( (probablly from the pluggin script).

This solution worked for me :

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;
    }
});

---

As @Orland says if you are using some effect like fade then there we need to wait before displaying the modal, this is a bit hacky but will do the trick.

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);

---

I hope there is still someone who needs this answer. There is a function called resetScrollbar() in bootstrap.js, for some stupid reason the developers decided to add the scrollbar dimensions to the body's padding right. so technically if you just set right-padding to an empty string it will fix the problem

---

I have tried so many things but worked small thing for me.

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

참고URL : https://stackoverflow.com/questions/32862394/bootstrap-modals-keep-adding-padding-right-to-body-after-closed