Bootstrap Modals, kapatıldıktan sonra vücuda dolgu hakkı eklemeye devam eder

Küçük bir web uygulaması oluşturmak için bootstrap ve Parse framework kullanıyorum. Ancak bu Bootstrap modları kapatıldıktan sonra vücuda dolgu hakkı eklemeye devam ediyor. Bunu nasıl çözebilirim?

Bu kodu javascript'ime koymaya çalıştım:

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

Ama işe yaramıyor. Bunun nasıl tamir edileceğini bilen biri var mı?

Kodum:

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

Küçük bir web uygulaması oluşturmak için bootstrap ve Parse framework kullanıyorum. Ancak bu Bootstrap modları kapatıldıktan sonra vücuda dolgu hakkı eklemeye devam ediyor. Bunu nasıl çözebilirim?

Bu, Bootstrap modelinden kaynaklanan bir aksaklık olabilir. Testlerime göre, sorun henüz tamamen kapatılmamışken #adminPanelbaşlatılıyor gibi görünüyor #loginModal. Çözümler kaldırarak animasyon çıkarma olabilir fade, sınıfı #adminPanelve #loginModalçağırmadan önce veya ayarlanmış bir zaman aşımı (~ 500 ms) $('#adminPanel').modal();. Bu yardımcı olur umarım.

Aşağıdaki css düzeltmesini kullandım ve benim için çalışıyor

body { padding-right: 0 !important }

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

Şimdi değiştirildi

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

Önyükleme işlevselliğini olması gerektiği gibi tutan saf bir css çözümü.

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

Sorunun nedeni, sayfada bir kaydırma çubuğu varsa, önyükleme jQuery'deki bir kalıcı pencere açıldığında biraz sağ dolgu ekleyen bir işlevdir. Bu, modal açıldığında vücut içeriğinizin değişmesini durdurur ve bu güzel bir özelliktir. Ama bu hataya neden oluyor.

Burada verilen diğer çözümlerin çoğu bu özelliği bozar ve modal açıldığında içeriğinizi biraz değiştirir. Bu çözüm, önyükleme modelinin içeriğini değiştirmeyen özelliğini koruyacak, ancak hatayı düzeltecektir.

padding-rightİlgili şey hakkında daha fazla endişeliyseniz , bunu yapabilirsiniz.

jQuery :

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

bu addClasssenin için olacak bodyve sonra bunu kullanarak

CSS :

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

ve bu kurtulmanıza yardımcı olacaktır padding-right.

Ama saklanma konusunda da endişeliyseniz scroll varsa, bunu da eklemelisiniz:

CSS :

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

İşte JSFiddle

Lütfen bir göz atın, işinize yarayacaktır.

Sadece bootstrap.min.css dosyasını açın

Bu satırı bul (varsayılan)

.modal-open{overflow:hidden;}

ve olarak değiştir

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

Sitenin her modeli için çalışacaktır. Taşma yapabilirsiniz: otomatik; kalıcı iletişim kutusunu açarken kaydırma çubuğunu olduğu gibi tutmak istiyorsanız.

ÇOK uzun zamandır aynı sorunu yaşadım. Buradaki cevapların hiçbiri işe yaramadı! Ancak aşağıdaki sorun çözüldü!

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

Bir modelin kapatılmasıyla tetiklenen iki olay vardır, önce bu hide.bs.modal, sonra bu hidden.bs.modal. Sadece birini kullanabilmelisin.

kolay düzeltme

bu sınıfı ekle

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

Bu bir geçersiz kılma ama işe yarıyor

Sadece fadesınıfı kaldırdım ve sınıfın solma etkisini ile değiştirdim animation.css. Umarım bu yardımcı olacak.

removeAttr çalışmaz, CSS özelliğini şu şekilde kaldırırsınız:

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

Özellik değeri olmadan özellik kaldırılır.

Varsayılan önyükleme 3.3.0 CSS'sini yüklüyorum ve benzer bir sorunla karşılaştım. Bu CSS'yi ekleyerek çözüldü:

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

Önemli olan, bootstrap modal javascript'in programatik olarak 15px dolguyu sağa eklemesidir. Tahminim kaydırma çubuğunu telafi etmek için olduğu, ama bunu istemiyorum.

Bootstrap 4 ile bu benim için çalıştı:

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

Bootstrap 3.3.7 ve sabit navbar için çözümüm ile aynı problemim var: Bu stili özel css'nize eklemek.

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

kaydırma penceresi çalışırken modal'inizin gösterilmesini sağlayacaktır. teşekkürler, umarım bu da sana yardımcı olur

Bunun eski bir soru olduğunu biliyorum, ancak buradaki cevapların hiçbiri benim benzer durumlarımdaki sorunu ortadan kaldırmadı ve bazı geliştiricilerin çözümümü okumasının da faydalı olacağını düşündüm.

Bir modal açıldığında, hala kullanıldığı web sitelerinde bootstrap 3'e bir miktar CSS eklemek için kullanıyorum.

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

Çözümüm herhangi bir ek CSS gerektirmiyor.

@Orland'ın işaret ettiği gibi, diğeri başladığında bir olay hala devam ediyor. Benim çözümüm, ikinci olayı başlatmakla ilgili ( adminPanelmodal göstererek ) yalnızca ilk olay bittiğinde (loginModal modal ).

Bunu, modalinizin hidden.bs.modalolayına loginModalaşağıdaki gibi bir dinleyici ekleyerek başarabilirsiniz :

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

Ve gerektiğinde, sadece modeli gizleyin loginModal.

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

Çünkü, modal'ı gösterip göstermemeye karar vermek için dinleyicinin içinde kendi mantığınızı uygulayabilirsiniz adminPanel.

Bootstrap Modal Events hakkında daha fazla bilgiyi buradan edinebilirsiniz .

İyi şanslar.

Bootstrap modelleri, gövde taşıyorsa bu dolguyu vücuda ekler.

Bootstrap 3.3.6'da (kullandığım sürüm) bu, bu doldurma hakkını vücut öğesine eklemekten sorumlu işlevdir: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Hızlı bir çözüm, bootstrap.js dosyasını çağırdıktan sonra bu işlevin üzerine yazmaktır:

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

Bu benim için sorunu çözdü.

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

Bu benim için çalıştı:

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

Sadece data-targetdüğmeyi kaldırın ve modeli jQuery kullanarak yükleyin.

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

jQuery:

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

Bootstrap javascript'i inceledim ve Modal kodunun adjustDialog(), Modal prototipinde tanımlanan ve jQuery'de gösterilen bir işlevde doğru dolguyu ayarladığını buldum . Aşağıdaki kodu, hiçbir şey yapmamak için bu işlevi geçersiz kılacak bir yere yerleştirmek benim için hile yaptı (bunu henüz ayarlamamanın sonucunun ne olduğunu bilmiyorum !!)

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

Bu sorunu çözebilir

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

Bu bir önyükleme hatasıdır ve v4-dev'de düzeltilmiştir: https://github.com/twbs/bootstrap/pull/18441 o zamana kadar CSS sınıfının altına eklemek yardımcı olacaktır.

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

Modals ve ajax kullanırken aynı sorunu yaşadım. Bunun nedeni, JS dosyasına hem ilk sayfada hem de ajax tarafından çağrılan sayfada iki kez başvurulmuş olmasıdır, bu nedenle modal kapatıldığında, JS olayını iki kez çağırır ve varsayılan olarak 17px'lik bir dolgu hakkı ekler.

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

Benim için çalıştı. Kaydırma Çubuğunun gövdede zorlandığını unutmayın - ancak yine de "kayan" bir sayfanız varsa, önemli değildir (?)

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

Bunu dene

Modal kapanıştan sonra sağ 0px dolgusunu gövdeye ekleyecektir.

Bir modeli açtığınızda, önceki modelin henüz tam olarak kapatılmamış olduğu görülür. Düzeltmek için, tüm modal tamamen kapatıldığında yeni modal açın, aşağıdaki kodları kontrol edin:

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

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

Ben şimdi bu eski ve burada sunulan tüm çözümler işe yarayabilir. Birine yardımcı olabilecek yeni bir şey ekliyorum: Aynı sorunu yaşadım ve modal açmanın sidenavıma bir marj hakkı eklediğini fark ettim (muhtemelen vücuda eklenen dolgudan bir tür miras). Sidenav'ıma {margin-right: 0! İmportant;} eklemek hile yaptı.

(Bootstrap v3.3.7) Tarayıcı denetçimden bunun doğrudan öğe stili özelliğinde ayarlandığını gördüm , cadı sınıf özelliklerini geçersiz kılıyor.

Modal şununla gösterilirken paddig-right değerini 'sıfırlamayı' denedim :

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

Ancak pencere yeniden boyutlandırıldığı anda geri gelir :( (muhtemelen eklenti komut dosyasından).

Bu çözüm benim için çalıştı:

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'ın dediği gibi, fade gibi bir efekt kullanıyorsanız, modal'ı görüntülemeden önce orada beklememiz gerekiyor, bu biraz hilekar ama hile yapacak.

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

Umarım hala bu cevaba ihtiyacı olan biri vardır. Bootstrap.js'de resetScrollbar () adında bir işlev vardır, bazı aptalca nedenlerle geliştiriciler kaydırma çubuğu boyutlarını gövdenin sağ dolgusuna eklemeye karar verdiler. teknik olarak sağ dolguyu boş bir dizeye ayarlarsanız sorunu çözecektir