web-dev-qa-db-ja.com

Bootstrapモーダルは、閉じた後もボディに右詰めを追加し続けます

私はbootstrapとParseフレームワークを使用して小さなwebappを構築しています。しかし、これらの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');
        }
    });
}

私はbootstrapとParseフレームワークを使用して小さなwebappを構築しています。しかし、これらのBootstrapモーダルは、閉じた後も本体にパディング権を追加し続けます。これを解決するには？

javascriptjqueryhtmlcsstwitter-bootstrap
78
phuwin

これは、Bootstrapモーダルからのグリッチかもしれません。私のテストから、問題は#adminPanelがまだ完全に閉じられていないのに#loginModalが初期化されているように思えます。回避策は、#adminPanelおよび#loginModalのfadeクラスを削除することでアニメーションを削除するか、$('#adminPanel').modal();を呼び出す前にタイムアウト（〜500ms）を設定することです。お役に立てれば。

48
Orland

私は以下のCSS修正を使用しましたが、それは私のために働いています

body { padding-right: 0 !important }
97
Ngatia Frankline

そのようなスタイルを追加するだけです：

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

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

見てください、それはあなたのためのトリックを行います。

12
vivekkupadhyay

Bootstrap.min.cssを開くだけです

この行を検索（デフォルト）

.modal-open{overflow:hidden;}

そしてそれを次のように変更します

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

サイトのすべてのモーダルで機能します。 overflow：autoを実行できます。モーダルダイアログを開いている間、スクロールバーをそのまま保持する場合。

11
Ashok Sen

bootstrap機能をそのまま維持する純粋なcssソリューション。

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

この問題は、ページにスクロールバーがある場合、モーダルウィンドウが開いたときに少し右にパディングを追加するbootstrap jQueryの関数が原因で発生します。これにより、モーダルが開いたときに身体のコンテンツが移動するのを防ぎます。これは素晴らしい機能です。しかし、それはこのバグを引き起こしています。

ここに記載されている他の多くのソリューションはその機能を破壊し、モーダルが開いたときにコンテンツをわずかにシフトさせます。このソリューションは、コンテンツを移動させないbootstrapモーダルの機能を保持しますが、バグを修正します。

10
chasmani

私はこの同じ問題を非常に長い間抱えていました。ここでの答えはどれもうまくいきませんでした！しかし、以下はそれを修正しました！

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

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

10
Sam Malayek

簡単な修正

このクラスを追加

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

そのオーバーライドが動作します

3
Benjamin Oats

removeAttrは動作しません。次のようなCSSプロパティを削除します：

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

プロパティ値がない場合、プロパティは削除されます。

2
jcdsr

fadeクラスを削除し、animation.cssでクラスフェードエフェクトを変更しました。これが役立つことを願っています。

2
febriana andringa

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

bootstrap 3.3.6（使用しているバージョン）では、これがbody要素にpadding-rightを追加する機能です。 https://github.com/twbs/bootstrap /blob/v3.3.6/dist/js/bootstrap.js#L118

簡単な回避策は、bootstrap.jsファイルを呼び出した後にその関数を単純に上書きすることです。

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

これで問題が解決しました。

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

ボタンからdata-targetを削除し、jQueryを使用してモーダルをロードするだけです。

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

jQuery：

$("#myBtn").modal('show');
1
Edison D'souza

デフォルトのbootstrap 3.3.0 CSSを読み込んでいますが、同様の問題がありました。このCSSを追加して解決しました。

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

！importantは、bootstrapモーダルjavascriptがプログラムで15pxのパディングを右側に追加するためです。私の推測では、スクロールバーを補正することですが、それは望ましくありません。

1
gauravbhai daxini

Bootstrap 4では、これがうまくいきました：

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

これは古い質問であることは知っていますが、ここからの回答はどれも私の似たような状況で問題を解決しませんでした。

モーダルが開かれたときに、まだ使用されているWebサイトでbootstrapにボディにCSSを追加するために使用します3。

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

私のソリューションは追加のCSSを必要としません。

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

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

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

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

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

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

Bootstrap Modal Events here に関する詳細情報を取得できます。

がんばろう。

1
Cleber de Souza Alcântara

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

0
Lucas Almeida

bootstrap javascriptを掘り下げたところ、Modalコードが、Modalプロトタイプで定義されjQueryで公開されているadjustDialog()という関数に正しいパディングを設定していることがわかりました。次のコードをどこかに配置してこの関数をオーバーライドし、何もしませんでした（私はこれを設定しないことの結果はまだわかりませんが!!）

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

0
Phil

Bootstrap 3.3.7と同じnavbarの解決策で同じ問題があります。このスタイルをカスタムcssに追加します。

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

スクロールウィンドウがまだ機能している間、モーダルが表示されます。おかげで、これがあなたにも役立つことを願っています

0
Debrian Ruhut Saragih

これは私のために働いたものです：

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

これはbootstrapバグであり、v4-devで修正されました： https://github.com/twbs/bootstrap/pull/18441 それまでは、CSSクラスの下に追加すると役立つはずです。

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

前のモーダルがまだ完全に閉じられていないモーダルを開くと発生します。修正するには、すべてのモーダルが完全に閉じられたときに新しいモーダルを開くだけで、以下のコードを確認します。

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

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }
0
Sakata Gintoki
$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

これを試して

モーダルを閉じた後、ボディにパディング右0pxを追加します。

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

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

0
user3666136

これで問題を解決できます

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