Modale Bootstrap dodają wyściółkę do ciała po zamknięciu

Używam frameworka bootstrap i parse, aby zbudować małą aplikację internetową. Ale te modały Bootstrap dodają wyściółkę do ciała po zamknięciu. Jak to rozwiązać?

Próbowałem umieścić ten kod w moim javascript:

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

Ale to nie działa. Czy ktoś wie, jak to naprawić?

Mój kod:

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

Używam frameworka bootstrap i parse, aby zbudować małą aplikację internetową. Ale te modały Bootstrap dodają wyściółkę do ciała po zamknięciu. Jak to rozwiązać?

To może być usterka modalu Bootstrap. Z moich testów wynika, że ​​problem polega na tym, że #adminPaneljest inicjowany, #loginModalale nie został jeszcze całkowicie zamknięty. Rozwiązaniem może być usunięcie animacji przez usunięcie fadeklasy #adminPaneli #loginModalustawienie limitu czasu (~ 500 ms) przed wywołaniem $('#adminPanel').modal();. Mam nadzieję że to pomoże.

Właśnie skorzystałem z poniższej poprawki css i działa ona dla mnie

body { padding-right: 0 !important }

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

Właśnie zmieniono na

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

Czyste rozwiązanie CSS, które zachowuje funkcjonalność ładowania początkowego tak, jak powinna.

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

Problem jest spowodowany funkcją w bootstrap jQuery, która dodaje trochę dopełnienia - w prawo, gdy otwiera się okno modalne, jeśli na stronie znajduje się pasek przewijania. To zapobiega przesuwaniu się zawartości ciała, gdy otwiera się modal, i jest to fajna funkcja. Ale to powoduje ten błąd.

Wiele innych podanych tutaj rozwiązań przerywa tę funkcję i sprawia, że ​​zawartość nieznacznie się zmienia w momencie otwarcia modalu. To rozwiązanie zachowa funkcję modalu bootstrap bez przesuwania zawartości, ale naprawi błąd.

Jeśli bardziej martwisz się padding-rightpowiązaną rzeczą, możesz to zrobić

jQuery :

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

to będzie addClassdo ciebie, bodya następnie używając tego

CSS :

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

a to pomoże ci się pozbyć padding-right.

Ale jeśli obawiasz się również ukrywania, scrollmusisz też dodać to:

CSS :

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

Oto JSFiddle

Proszę spojrzeć, to załatwi sprawę.

Po prostu otwórz bootstrap.min.css

Znajdź tę linię (domyślnie)

.modal-open{overflow:hidden;}

i zmień go jako

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

Będzie działać dla każdego modalu witryny. Możesz zrobić przepełnienie: auto; jeśli chcesz zachować pasek przewijania bez zmian podczas otwierania okna modalnego.

Miałem ten sam problem przez BARDZO długi czas. Żadna z odpowiedzi tutaj nie zadziałała! Ale następujące rozwiązania to naprawiły!

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

Są dwa zdarzenia, które uruchamiają się po zamknięciu modalu, najpierw to hide.bs.modal, a potem to hidden.bs.modal. Powinieneś móc użyć tylko jednego.

łatwa naprawa

dodaj tę klasę

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

To przesłonięcie, ale działa

Właśnie usunąłem fadeklasę i zmieniłem efekt zanikania klasy za pomocą animation.css. Mam nadzieję, że to pomoże.

removeAttr nie zadziała, będziesz musiał usunąć właściwość CSS w następujący sposób:

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

Bez wartości właściwości właściwość jest usuwana.

Ładuję domyślny plik CSS bootstrap 3.3.0 i miałem podobny problem. Rozwiązany przez dodanie tego CSS:

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

Jest to ważne, ponieważ modalny javascript bootstrap dodaje 15 pikseli dopełnienia po prawej stronie programowo. Domyślam się, że ma to na celu skompensowanie paska przewijania, ale tego nie chcę.

Z Bootstrap 4 to zadziałało dla mnie:

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

Mam ten sam problem z Bootstrapem 3.3.7 i moim rozwiązaniem dla stałego paska nawigacyjnego: Dodanie tego stylu do niestandardowego css.

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

sprawi, że twój modal zostanie pokazany, podczas gdy okno przewijania nadal działa. dzięki, mam nadzieję, że to też ci pomoże

Wiem, że to stare pytanie, ale żadna z odpowiedzi z tego miejsca nie usunęła problemu w podobnych sytuacjach i pomyślałem, że niektórzy deweloperzy również powinni przeczytać moje rozwiązanie.

Używam, aby dodać CSS do ciała, gdy modal jest otwarty, na stronach internetowych, gdzie nadal jest używany bootstrap 3.

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

Moje rozwiązanie nie wymaga dodatkowego CSS.

Jak wskazał @Orland, jedno wydarzenie nadal ma miejsce, gdy zaczyna się drugie. Moje rozwiązanie polega na rozpoczęciu drugiego zdarzenia (pokazanie adminPanelmodalu) dopiero po zakończeniu pierwszego (ukrycie loginModalmodalu).

Możesz to osiągnąć, dołączając odbiornik do hidden.bs.modalzdarzenia swojego loginModalmodalu, jak poniżej:

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

W razie potrzeby po prostu ukryj loginModalmodal.

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

Oczywiście możesz zaimplementować własną logikę wewnątrz słuchacza, aby zdecydować, czy pokazać adminPanelmodalne, czy nie .

Więcej informacji o zdarzeniach modalnych Bootstrap można znaleźć tutaj .

Powodzenia.

Modele Bootstrap dodają to wypełnienie - bezpośrednio do ciała, jeśli ciało jest przepełnione.

W bootstrap 3.3.6 (wersja, której używam) jest to funkcja odpowiedzialna za dodanie tego dopełnienia w prawo do elementu body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Szybkim obejściem jest po prostu nadpisanie tej funkcji po wywołaniu pliku bootstrap.js:

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

To rozwiązało problem.

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

Oto, co zadziałało dla mnie:

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

Po prostu usuń przycisk data-targetz przycisku i załaduj modal za pomocą jQuery.

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

jQuery:

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

Zagłębiłem się w javascript bootstrap i odkryłem, że kod modalny ustawia właściwe wypełnienie w wywołanej funkcji, adjustDialog()która jest zdefiniowana w prototypie Modal i ujawniona w jQuery. Umieszczenie poniższego kodu gdzieś w celu przesłonięcia tej funkcji, aby nic nie zrobiło, załatwiło mi sprawę (chociaż nie wiem, jakie są konsekwencje niepodjęcia tego ustawienia !!)

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

To może rozwiązać problem

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

Jest to błąd ładowania początkowego i naprawiony w wersji v4-dev: https://github.com/twbs/bootstrap/pull/18441 do tego czasu powinno pomóc dodanie poniższej klasy CSS.

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

Miałem ten sam problem przy użyciu modali i ajax. Było tak, ponieważ plik JS był odwoływany dwukrotnie, zarówno na pierwszej stronie, jak i na stronie wywoływanej przez ajax, więc kiedy modal został zamknięty, wywołał zdarzenie JS dwukrotnie, co domyślnie dodaje dopełnienie o 17 pikseli.

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

Pracował dla mnie. Zwróć uwagę, że pasek przewijania jest wymuszony w treści - ale jeśli i tak masz stronę „przewijaną”, nie ma to znaczenia (?)

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

Spróbuj tego

Doda wypełnienie po prawej stronie 0px do ciała po zamknięciu modalnym.

Występuje, gdy otwierasz modal, że poprzedni modal nie jest jeszcze całkowicie zamknięty. Aby to naprawić, po prostu otwórz nowy modal w momencie, gdy wszystkie modalne są całkowicie zamknięte, sprawdź kody poniżej:

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

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

Teraz to jest stare i wszystkie oferowane tutaj rozwiązania mogą działać. Po prostu dodaję coś nowego na wypadek, gdyby ktoś mógł pomóc: miałem ten sam problem i zauważyłem, że otwarcie modalu było dodaniem prawa do marginesu do mojego sidenav (prawdopodobnie rodzaj dziedziczenia z wypełnienia dodanego do ciała). Dodanie {margin-right: 0! Important;} do mojego sidenava załatwiło sprawę.

(Bootstrap v3.3.7) Z inspektora mojej przeglądarki zauważyłem, że jest to bezpośrednio ustawione we właściwości stylu elementu , co zastępuje właściwości klasy.

Próbowałem `` zresetować '' wartość paddig-right, gdy modal jest wyświetlany z:

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

Ale wraca, gdy tylko zmieni się rozmiar okna :( (prawdopodobnie ze skryptu pluggin).

To rozwiązanie zadziałało dla mnie:

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

Jak mówi @Orland, jeśli używasz jakiegoś efektu, takiego jak zanikanie, musimy poczekać przed wyświetleniem modalu, jest to trochę hacky, ale załatwi sprawę.

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

Mam nadzieję, że nadal jest ktoś, kto potrzebuje tej odpowiedzi. W bootstrap.js znajduje się funkcja o nazwie resetScrollbar (), z jakiegoś głupiego powodu programiści zdecydowali się dodać wymiary paska przewijania do prawego dopełnienia ciała. więc technicznie rzecz biorąc, jeśli po prostu ustawisz dopełnienie w prawo na pusty ciąg, rozwiąże to problem