Bootstrap Modals terus menambahkan padding-right ke body setelah ditutup

Saya menggunakan kerangka bootstrap dan Parse untuk membangun aplikasi web kecil. Tetapi modal Bootstrap tersebut terus menambahkan padding-right ke body setelah ditutup. Bagaimana mengatasi ini?

Saya mencoba memasukkan kode ini di javascript saya:

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

Tapi itu tidak berhasil. Apakah ada yang tahu cara memperbaikinya?

Kode saya:

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

Saya menggunakan kerangka bootstrap dan Parse untuk membangun aplikasi web kecil. Tetapi modal Bootstrap tersebut terus menambahkan padding-right ke body setelah ditutup. Bagaimana mengatasi ini?

Ini mungkin kesalahan dari modal Bootstrap. Dari pengujian saya, sepertinya masalahnya adalah yang #adminPanelsedang diinisialisasi sementara #loginModalbelum sepenuhnya ditutup. Solusinya dapat menghapus animasi dengan menghapus fadekelas #adminPaneldan #loginModalatau menyetel waktu tunggu (~ 500 md) sebelum memanggil $('#adminPanel').modal();. Semoga ini membantu.

Saya baru saja menggunakan perbaikan css di bawah ini dan berfungsi untuk saya

body { padding-right: 0 !important }

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

Baru saja berubah menjadi

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

Solusi css murni yang menjaga fungsionalitas bootstrap sebagaimana mestinya.

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

Masalahnya disebabkan oleh fungsi di jQuery bootstrap yang menambahkan sedikit padding-right saat jendela modal terbuka, jika ada bilah gulir di halaman. Itu menghentikan konten tubuh Anda bergeser saat modal terbuka, dan ini adalah fitur yang bagus. Tapi itu menyebabkan bug ini.

Banyak solusi lain yang diberikan di sini merusak fitur itu, dan membuat konten Anda sedikit bergeser ketika modal terbuka. Solusi ini akan mempertahankan fitur modal bootstrap tidak mengalihkan konten, tetapi memperbaiki bug.

Jika Anda lebih mementingkan padding-righthal terkait maka Anda bisa melakukan ini

jQuery :

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

ini akan addClassuntuk Anda bodydan kemudian menggunakan ini

CSS :

.test[style] {
     padding-right:0 !important;
 }

dan ini akan membantu Anda untuk menyingkirkan padding-right.

Tetapi jika Anda juga khawatir tentang persembunyiannya scroll Anda harus menambahkan ini juga:

CSS :

.test.modal-open {
    overflow: auto;
 }

Inilah JSFiddle

Silakan lihat, itu akan melakukan trik untuk Anda.

Buka saja bootstrap.min.css

Temukan baris ini (default)

.modal-open{overflow:hidden;}

dan mengubahnya sebagai

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

Ini akan berfungsi untuk setiap modal situs. Anda dapat melakukan overflow: auto; jika Anda ingin tetap scrollbar seperti saat membuka dialog modal.

Saya mengalami masalah yang sama untuk waktu yang SANGAT lama. Tak satu pun jawaban di sini berhasil! Tetapi hal berikut memperbaikinya!

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

Ada dua peristiwa yang terjadi saat menutup modal, pertama hide.bs.modal, dan kemudian hidden.bs.modal. Anda harus bisa menggunakan hanya satu.

perbaikan mudah

tambahkan kelas ini

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

Ini menimpa tetapi berfungsi

Saya baru saja menghapus fadekelas dan mengubah efek fade kelas animation.css. Saya harap ini akan membantu.

removeAttr tidak akan berfungsi, Anda harus menghapus properti CSS seperti ini:

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

Tanpa nilai properti, properti tersebut dihapus.

Saya memuat CSS bootstrap 3.3.0 default dan mengalami masalah serupa. Dipecahkan dengan menambahkan CSS ini:

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

Yang! Penting adalah karena javascript modal bootstrap menambahkan 15px padding ke kanan secara programatik. Dugaan saya adalah untuk mengimbangi scrollbar, tetapi saya tidak menginginkannya.

Dengan Bootstrap 4 ini berhasil untuk saya:

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

Saya memiliki masalah yang sama dengan Bootstrap 3.3.7 dan solusi saya untuk navbar tetap: Menambahkan gaya ini ke css kustom Anda.

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

itu akan membuat modal Anda ditampilkan saat jendela gulir masih berfungsi. terima kasih, semoga ini akan membantu Anda juga

Saya tahu ini adalah pertanyaan lama, tetapi tidak ada jawaban dari sini yang menghilangkan masalah dalam situasi saya yang serupa dan saya pikir akan berguna bagi beberapa pengembang untuk membaca solusi saya juga.

Saya menggunakan untuk menambahkan beberapa CSS ke tubuh ketika sebuah modal dibuka, di situs web di mana itu masih digunakan bootstrap 3.

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

Solusi saya tidak memerlukan CSS tambahan.

Seperti yang ditunjukkan oleh @Orland, satu acara masih berlangsung saat acara lainnya dimulai. Solusi saya adalah tentang memulai acara kedua (menunjukkan adminPanelmodal) hanya ketika yang pertama selesai (menyembunyikan loginModalmodal).

Anda dapat melakukannya dengan melampirkan listener ke hidden.bs.modalacara loginModalmodal Anda seperti di bawah ini:

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

Dan, bila perlu, cukup sembunyikan loginModalmodal.

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

Tentu saja Anda dapat mengimplementasikan logika Anda sendiri di dalam pendengar untuk memutuskan untuk menampilkan atau tidak adminPanelmodal.

Anda bisa mendapatkan info lebih lanjut tentang Bootstrap Modal Events di sini .

Semoga berhasil.

Model bootstrap menambahkan bantalan yang tepat ke bodi jika bodi meluap.

Pada bootstrap 3.3.6 (versi yang saya gunakan) ini adalah fungsi yang bertanggung jawab untuk menambahkan padding-right ke elemen body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Solusi cepatnya adalah dengan menimpa fungsi itu setelah memanggil file bootstrap.js:

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

Ini memperbaiki masalah saya.

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

Inilah yang berhasil untuk saya:

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

Hapus saja data-targetdari tombol dan muat modal menggunakan jQuery.

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

jQuery:

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

Saya menggali javascript bootstrap dan menemukan bahwa kode Modal menetapkan padding yang tepat dalam fungsi yang disebut adjustDialog()yang didefinisikan pada prototipe Modal dan diekspos di jQuery. Menempatkan kode berikut di suatu tempat untuk menimpa fungsi ini agar tidak melakukan apa-apa melakukan trik bagi saya (meskipun saya tidak tahu apa konsekuensi dari tidak menyetel ini !!)

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

Ini bisa menyelesaikan masalah

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

Ini adalah bug bootstrap dan diperbaiki di v4-dev: https://github.com/twbs/bootstrap/pull/18441 hingga saat itu menambahkan kelas CSS di bawah akan membantu.

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

Saya memiliki masalah yang sama menggunakan modals dan ajax. Itu karena file JS direferensikan dua kali, baik di halaman pertama dan di halaman yang dipanggil oleh ajax, jadi ketika modal ditutup, itu memanggil event JS dua kali, secara default, menambahkan padding-right 17px.

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

Bekerja untuk saya. Perhatikan bahwa Scrollbar dipaksa masuk - tetapi jika Anda memiliki halaman "scrolling", tidak masalah (?)

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

Coba ini

Ini akan menambahkan padding tepat 0px ke body setelah modal close.

Itu terjadi ketika Anda membuka modal bahwa modal sebelumnya belum sepenuhnya ditutup. Untuk memperbaikinya cukup buka modal baru pada saat semua modal ditutup sepenuhnya, periksa kode di bawah ini:

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

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

Saya sekarang ini sudah tua, dan semua solusi yang ditawarkan di sini mungkin berfungsi. Saya hanya menambahkan sesuatu yang baru jika hal itu dapat membantu seseorang: Saya memiliki masalah yang sama dan memperhatikan bahwa membuka modal menambahkan margin-right ke sidenav saya (mungkin semacam warisan dari padding yang ditambahkan ke tubuh). Menambahkan {margin-right: 0! Important;} ke sidenav saya berhasil.

(Bootstrap v3.3.7) Dari inspektur browser saya, saya melihat bahwa ini secara langsung diatur dalam properti gaya elemen , penyihir menimpa properti kelas.

Saya mencoba untuk 'mengatur ulang' nilai paddig-right ketika modal ditampilkan dengan:

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

Tapi itu kembali segera setelah jendela diubah ukurannya :( (mungkin dari skrip pluggin).

Solusi ini berhasil untuk saya:

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

Seperti yang dikatakan @Orland jika Anda menggunakan beberapa efek seperti fade maka di sana kita harus menunggu sebelum menampilkan modal, ini agak hacky tetapi akan berhasil.

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

Saya berharap masih ada yang membutuhkan jawaban ini. Ada fungsi yang disebut resetScrollbar () di bootstrap.js, karena alasan bodoh pengembang memutuskan untuk menambahkan dimensi scrollbar ke padding badan kanan. jadi secara teknis jika Anda hanya mengatur padding kanan ke string kosong itu akan memperbaiki masalah