닫힌 후에도 Bootstrap Modals가 본문에 패딩 권한을 계속 추가합니다.

닫힌 후에도 Bootstrap Modals가 본문에 패딩 권한을 계속 추가합니다.

나는 작은 웹 앱을 만들기 위해 부트스트랩과 파싱 프레임워크를 사용하고 있습니다.하지만 그 부트스트랩 모델들은 닫힌 후에도 몸에 패딩 라이트를 계속 추가합니다.어떻게 해결합니까?

는 이 나의 : 나는이코자립트넣했습다니으고려에크바스.

$('.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?

코드: 내코드:

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

저는 작은 웹 앱을 만들기 위해 부트스트랩과 파싱 프레임워크를 사용하고 있습니다.하지만 그 부트스트랩 모델들은 닫힌 후에도 몸에 패딩 라이트를 계속 추가합니다.어떻게 해결합니까?

나는 방금 아래의 css 수정을 사용했고 그것은 나에게 효과가 있습니다.

body { padding-right: 0 !important }

부트스트랩 모달의 결함일 수 있습니다.제가 검사한 바로는, 문제는#adminPanel에 음다 시초 중입화 니다기동 안 간▁is 니#loginModal아직 완전히 닫히지 않았습니다.이 문제의 해결 방법은 애니메이션을 제거하는 것입니다.fade을 가르치다.#adminPanel그리고.#loginModal한 후 전화를 걸 수 있습니다.$('#adminPanel').modal();이게 도움이 되길 바랍니다.

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

방금 변경됨

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

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

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

이 문제는 bootstrap 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;
 }

여기 제이에스 Fiddle이 있습니다.

한번 보세요, 효과가 있을 거예요.

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

이것이 저에게 도움이 되었습니다.

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

손쉬운 해결책

이 클래스 추가

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

오버라이드이지만 작동합니다.

기본 부트스트랩 3.3.0 CSS를 로드하는데 비슷한 문제가 있었습니다.이 CSS를 추가하면 해결됩니다.

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

!중요한 것은 부트스트랩 모달 자바스크립트가 오른쪽에 15px의 패딩을 프로그램적으로 추가하기 때문입니다.제 생각에는 스크롤바를 보상하기 위한 것 같은데, 저는 그것을 원하지 않습니다.

방금 제거했습니다.fade 를 사용하여 클래스 페이드 효과를 변경합니다.animation.css이것이 도움이 되길 바랍니다.

이것이 오래된 질문이라는 것을 알지만, 여기서 나온 답변 중 어떤 것도 저와 비슷한 상황에서 문제를 제거하지 못했고, 저는 일부 개발자들이 제 솔루션을 읽는 것이 유용할 것이라고 생각했습니다.

저는 아직 부트스트랩 3을 사용하는 웹사이트에서 모달이 열릴 때 신체에 CSS를 추가하곤 합니다.

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

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

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

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

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

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

나의 솔루션은 추가 CSS가 필요하지 않습니다.

@Orland가 지적한 바와 같이, 하나의 사건은 다른 사건이 시작될 때에도 여전히 일어나고 있습니다.은 두 를 시작하는 입니다.adminPanel첫만 () ▁modal▁when때▁the만▁only)을.loginModal모달

은 기를다연이여수수있작다습니행할에 할 수 .hidden.bs.modal의 신의이트의 loginModal아래와 같은 모달:

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

필요할 요, 필할때숨, 그깁니냥.loginModal

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

물론 당신은 그것을 보여주거나 말거나 결정하기 위해 청취자 내부에서 당신만의 논리를 구현할 수 있습니다.adminPanel

부트스트랩 모달 이벤트에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

행운을 빌어요.

부트스트랩 모델은 바디가 오버플로일 경우 바디에 패딩을 바로 추가합니다.

부트스트랩 3.3.6(내가 사용하는 버전)에서 이것은 본문 요소에 패딩 권한을 추가하는 기능입니다. 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;
}

부트스트랩의 기존 클래스를 사용하여 다음을 추가하여 이 문제를 해결할 수 있습니다.pe-0신체 태그에.
이는 다음과 같습니다.

.pe-0 {
    padding-right: 0 !important;
}

따라서 본문 태그에 액세스할 수 있다면 추가 CSS나 자바스크립트를 추가할 필요가 없습니다.

제거하기만 하면 됩니다.data-target버튼에서 jQuery를 사용하여 모달을 로드합니다.

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

jQuery:

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

부트스트랩 자바스크립트를 파고들었더니 모달 코드가 다음과 같은 함수에서 올바른 패딩을 설정한다는 것을 발견했습니다.adjustDialog()이는 Modal 프로토타입에 정의되고 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');
    });
  }

저는 이제 이것이 오래되었고, 여기서 제공되는 모든 솔루션이 작동할 수 있습니다.누군가에게 도움이 될 수 있는 새로운 것을 추가하는 것입니다.저도 같은 문제를 겪었고 모달을 여는 것이 제 사이드네이브에 마진권(아마도 몸에 추가된 패딩에서 나오는 일종의 상속)을 추가하는 것이라는 것을 알아차렸습니다.사이드내브에 {마진-right:0!important;}을(를) 추가하면 효과가 있었습니다.

@Orland가 말하길 만약 당신이 페이드와 같은 효과를 사용하고 있다면, 우리는 모달을 표시하기 전에 기다려야 합니다, 이것은 약간 진부하지만 속임수를 쓸 것입니다.

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()라는 함수가 있는데, 어떤 어리석은 이유로 개발자들은 스크롤바 치수를 본문의 패딩 오른쪽에 추가하기로 결정했습니다. 따라서 기술적으로 빈 문자열에 오른쪽 패딩만 설정하면 문제가 해결됩니다.

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