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

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

방금 변경

.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. 하나만 사용할 수 있어야합니다.

쉬운 수정

이 수업 추가

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

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

방금 fade클래스를 제거하고 클래스 페이드 효과를 animation.css. 이것이 도움이되기를 바랍니다.

removeAttr이 작동하지 않습니다. 다음과 같이 CSS 속성을 제거합니다.

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

속성 값이 없으면 속성이 제거됩니다.

기본 부트 스트랩 3.3.0 CSS를로드 중이며 비슷한 문제가 발생했습니다. 이 CSS를 추가하여 해결되었습니다.

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

중요한 것은 부트 스트랩 모달 자바 스크립트가 오른쪽에 15px의 패딩을 프로그래밍 방식으로 추가하기 때문입니다. 내 생각 엔 스크롤바를 보상하기위한 것이지만 나는 그것을 원하지 않는다.

Bootstrap 4에서 이것은 나를 위해 일했습니다.

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

나는 Bootstrap 3.3.7과 고정 navbar에 대한 솔루션에 동일한 문제가 있습니다.이 스타일을 사용자 정의 CSS에 추가합니다.

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

스크롤 창이 계속 작동하는 동안 모달이 표시됩니다. 고마워요, 이것이 당신에게도 도움이되기를 바랍니다.

나는 이것이 오래된 질문이라는 것을 알고 있지만 여기의 답변 중 어느 것도 내 비슷한 상황에서 문제를 제거하지 않았으며 일부 개발자가 내 솔루션을 읽는 것이 유용 할 것이라고 생각했습니다.

모달이 열릴 때 여전히 부트 스트랩 3으로 사용되는 웹 사이트에서 본문에 CSS를 추가하는 데 사용합니다.

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

내 솔루션에는 추가 CSS가 필요하지 않습니다.

@Orland가 지적했듯이 하나의 이벤트는 다른 이벤트가 시작될 때 여전히 발생합니다. 내 솔루션은 첫 번째 이벤트 adminPanel가 완료되었을 때만 두 번째 이벤트 ( 모달 표시)를 시작하는 것입니다 ( loginModal모달 숨기기 ).

아래와 같이 모달 의 hidden.bs.modal이벤트에 리스너를 연결하여이를 수행 할 수 있습니다 loginModal.

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

그리고 필요한 경우 loginModal모달을 숨 깁니다 .

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

couse의 경우 adminPanel모달 을 표시할지 여부를 결정하기 위해 리스너 내부에 자체 논리를 구현할 수 있습니다 .

여기에서 부트 스트랩 모달 이벤트에 대한 자세한 정보를 얻을 수 있습니다 .

행운을 빕니다.

부트 스트랩 모델은 신체가 넘치면 그 패딩을 신체에 오른쪽으로 추가합니다.

부트 스트랩 3.3.6 (내가 사용중인 버전)에서 이것은 body 요소에 패딩 오른쪽을 추가하는 기능입니다 : https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

빠른 해결 방법은 bootstrap.js 파일을 호출 한 후 해당 함수를 덮어 쓰는 것입니다.

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

이것은 나를 위해 문제를 해결했습니다.

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

이것은 나를 위해 일한 것입니다.

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

data-target버튼 에서을 제거하고 jQuery를 사용하여 모달을로드하십시오.

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

jQuery :

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

부트 스트랩 자바 스크립트를 살펴본 결과 모달 코드 adjustDialog()가 모달 프로토 타입에 정의되고 jQuery에 노출 된 함수에서 올바른 패딩을 설정한다는 것을 발견했습니다 . 이 함수를 재정의하기 위해 어딘가에 다음 코드를 배치하면 아무것도하지 않습니다 (아직 설정하지 않은 결과가 무엇인지 모르겠지만!)

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

이것은 문제를 해결할 수 있습니다

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

이것은 부트 스트랩 버그이며 v4-dev에서 수정되었습니다 : https://github.com/twbs/bootstrap/pull/18441 그때까지 CSS 클래스를 추가하면 도움이 될 것입니다.

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

모달과 아약스를 사용하여 동일한 문제가 발생했습니다. JS 파일이 첫 페이지와 ajax가 호출 한 페이지 모두에서 두 번 참조 되었기 때문에 모달이 닫힐 때 JS 이벤트를 두 번 호출하여 기본적으로 17px의 패딩 오른쪽을 추가했습니다.

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

나를 위해 일했습니다. 스크롤바는 본문에 강제 적용되지만 "스크롤"페이지가있는 경우에는 문제가되지 않습니다 (?)

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

이 시도

모달 닫기 후 본문에 0px 오른쪽 패딩을 추가합니다.

이전 모달이 아직 완전히 닫히지 않은 모달을 열 때 발생합니다. 수정하려면 모든 모달이 완전히 닫힐 때 새 모달을 열기 만하면 아래 코드를 확인하십시오.

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

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

나는 이제 이것은 오래되었고 여기에 제공된 모든 솔루션이 작동 할 수 있습니다. 누군가를 도울 수있는 경우를 대비하여 새로운 것을 추가하는 중입니다. 같은 문제가 있었고 모달을 여는 것이 내 sidenav에 여백 권리를 추가한다는 것을 알았습니다 (아마도 본문에 추가 된 패딩에서 일종의 상속). 내 sidenav에 {margin-right : 0! important;}를 추가하면 트릭이 생겼습니다.

(Bootstrap v3.3.7) 내 브라우저 검사기에서 이것이 요소 스타일 속성 에 직접 설정되어 있음을 보았고 마녀가 클래스 속성을 재정의합니다.

모달이 다음과 같이 표시 될 때 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;
    }
});

@Orland가 말했듯이 fade와 같은 효과를 사용하는 경우 모달을 표시하기 전에 기다려야합니다. 이것은 약간 해키하지만 트릭을 수행 할 것입니다.

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

이 대답이 필요한 사람이 아직 있기를 바랍니다. bootstrap.js에는 resetScrollbar ()라는 함수가 있습니다. 어리석은 이유로 개발자가 본문의 패딩 오른쪽에 스크롤바 크기를 추가하기로 결정했습니다. 기술적으로 오른쪽 패딩을 빈 문자열로 설정하면 문제가 해결됩니다.