ブートストラップモーダルは閉じた後も本体にパディング権を追加し続ける

ブートストラップとParseフレームワークを使用して、小さなWebアプリケーションを構築しています。しかし、これらのBootstrapモーダルは、閉じた後、本体にパディング権を追加し続けます。これを解決するには？

私はこのコードを私のJavaScriptに入れようとしました：

$('.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フレームワークを使用して、小さなWebアプリケーションを構築しています。しかし、これらのBootstrapモーダルは、閉じた後、本体にパディング権を追加し続けます。これを解決するには？

これは、Bootstrapモーダルの不具合の可能性があります。私のテストから、問題はまだ完全に閉じられていないのに#adminPanel初期化#loginModalされているようです。回避策は削除することで、アニメーションを削除することができますfade上のクラスを#adminPanelして#loginModal呼び出す前に、または設定されたタイムアウト（〜500ミリ秒）$('#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');
});

モーダルの終了時に発生する2つのイベントがあります。最初はでhide.bs.modal、次にhidden.bs.modalです。1つだけ使用できるはずです。

簡単な修正

このクラスを追加

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

！重要なのは、ブートストラップモーダルjavascriptがプログラムで右側に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が使用されているWebサイトで、CSSを本文に追加するために使用します。

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

私のソリューションでは、追加のCSSは必要ありません。

@Orlandで指摘されているように、1つのイベントは、他のイベントの開始時にまだ発生しています。私の解決策は、最初のイベントadminPanelが終了したときにのみ（モーダルを表示して）2番目のイベントを開始する（モーダルを非表示にするloginModal）ことです。

以下のようhidden.bs.modalに、loginModalモーダルのイベントにリスナーをアタッチすることでそれを実現できます。

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

そして、必要に応じて、loginModalモーダルを非表示にします。

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

当然、adminPanelモーダルを表示するかどうかを決定するために、リスナー内に独自のロジックを実装できます。

ブートストラップモーダルイベントの詳細については、こちらをご覧ください。

幸運を。

ボディがオーバーフローしている場合、ブートストラップモデルはそのパディング権をボディに追加します。

ブートストラップ3.3.6（私が使用しているバージョン）では、これはbody要素にpadding-rightを追加する機能です：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');

ブートストラップのJavaScriptを調べたところ、モーダルコード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;
}

私はモーダルとajaxを使用して同じ問題を抱えていました。これは、JSファイルが最初のページとajaxによって呼び出されたページの両方で2回参照されたため、モーダルが閉じられたときに、JSイベントを2回呼び出し、デフォルトで17pxのパディング権限が追加されました。

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

私のために働いた。Scrollbarは本文で強制されることに注意してください-とにかく「スクロール」ページがある場合は問題ではありません（？）

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

私は今これが古く、ここで提供されるすべてのソリューションが機能する可能性があります。私は誰かを助けることができる場合に備えて新しいものを追加しています：同じ問題があり、モーダルを開くと私のサイドナビゲーションにマージン権が追加されていることに気づきました（おそらくボディに追加されたパディングからの一種の継承）。{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がフェードなどのエフェクトを使用している場合、モーダルを表示する前に待機する必要があると述べていますが、これは少しハッキーですがトリックを実行します。

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（）と呼ばれる関数があります。なんらかの愚かな理由により、開発者はスクロールバーの寸法を本体のパディング右に追加することにしました。技術的には、右パディングを空の文字列に設定するだけで問題が解決します