I Modali Bootstrap continuano ad aggiungere imbottitura direttamente al corpo dopo la chiusura

Sto usando bootstrap e Parse framework per creare una piccola webapp. Ma quei modali Bootstrap continuano ad aggiungere padding-right al corpo dopo la chiusura. Come risolverlo?

Ho provato a inserire questo codice nel mio javascript:

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

Ma non funziona. Qualcuno sa come risolvere questo problema?

Il mio codice:

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

Sto usando bootstrap e Parse framework per creare una piccola webapp. Ma quei modali Bootstrap continuano ad aggiungere padding-right al corpo dopo la chiusura. Come risolverlo?

Questo potrebbe essere un problema tecnico di Bootstrap modal. Dai miei test, sembra che il problema sia che #adminPanelviene inizializzato mentre #loginModalnon è stato ancora completamente chiuso. Le soluzioni alternative possono essere rimuovendo l'animazione rimuovendo la fadeclasse #adminPanele la #loginModalo impostare un timeout (~ 500 ms) prima di chiamare $('#adminPanel').modal();. Spero che questo ti aiuti.

Ho appena usato la correzione CSS di seguito e funziona per me

body { padding-right: 0 !important }

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

Appena cambiato in

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

Una soluzione css pura che mantiene la funzionalità bootstrap come dovrebbe essere.

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

Il problema è causato da una funzione nel jQuery bootstrap che aggiunge un po 'di padding-right quando si apre una finestra modale, se c'è una barra di scorrimento sulla pagina. Ciò impedisce al contenuto del tuo corpo di spostarsi quando si apre il modale, ed è una bella caratteristica. Ma sta causando questo bug.

Molte delle altre soluzioni fornite qui interrompono questa funzione e fanno spostare leggermente il contenuto quando si apre il modale. Questa soluzione preserverà la funzionalità del modal bootstrap non spostando il contenuto, ma risolverà il bug.

Se sei più preoccupato per la padding-rightcosa correlata, puoi farlo

jQuery :

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

questo sarà addClassa tuo bodye quindi usando questo

CSS :

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

e questo ti aiuterà a sbarazzartene padding-right.

Ma se sei preoccupato anche per il nascondiglio scroll devi aggiungere anche questo:

CSS :

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

Ecco il JSFiddle

Per favore, dai un'occhiata, farà il trucco per te.

Basta aprire bootstrap.min.css

Trova questa linea (impostazione predefinita)

.modal-open{overflow:hidden;}

e cambiarlo come

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

Funzionerà per ogni modale del sito. Puoi fare overflow: auto; se vuoi mantenere la barra di scorrimento così com'è durante l'apertura della finestra di dialogo modale.

Ho avuto lo stesso problema per molto tempo. Nessuna delle risposte qui ha funzionato! Ma quanto segue lo ha risolto!

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

Ci sono due eventi che si attivano alla chiusura di un modale, prima è hide.bs.modale poi è hidden.bs.modal. Dovresti essere in grado di usarne solo uno.

soluzione facile

aggiungi questa classe

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

È un override ma funziona

Ho appena rimosso la fadeclasse e modificato l'effetto di dissolvenza della classe con animation.css. Spero che questo ti possa aiutare.

removeAttr non funzionerà, dovrai rimuovere la proprietà CSS in questo modo:

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

Senza alcun valore di proprietà, la proprietà viene rimossa.

Sto caricando il bootstrap 3.3.0 CSS predefinito e ho riscontrato un problema simile. Risolto aggiungendo questo CSS:

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

L'importante è che il javascript modale bootstrap aggiunge 15px di riempimento alla destra in modo programmatico. La mia ipotesi è che sia per compensare la barra di scorrimento, ma non lo voglio.

Con Bootstrap 4 questo ha funzionato per me:

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

Ho lo stesso problema con Bootstrap 3.3.7 e la mia soluzione per la barra di navigazione fissa: l'aggiunta di questo stile al tuo css personalizzato.

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

mostrerà il tuo modale mentre la finestra di scorrimento funziona ancora. grazie, spero che questo possa aiutare anche te

So che questa è una vecchia domanda, ma nessuna delle risposte da qui ha rimosso il problema nelle mie situazioni simili e ho pensato che sarebbe stato utile per alcuni sviluppatori leggere anche la mia soluzione.

Io uso per aggiungere un po 'di CSS al corpo quando viene aperto un modale, nei siti web in cui viene ancora utilizzato bootstrap 3.

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

La mia soluzione non richiede alcun CSS aggiuntivo.

Come sottolineato da @Orland, un evento sta ancora accadendo quando inizia l'altro. La mia soluzione è avviare il secondo evento (mostrando il adminPanelmodale) solo quando il primo è finito (nascondendo illoginModal modale).

Puoi farlo allegando un ascoltatore hidden.bs.modalall'evento del tuo loginModalmodale come di seguito:

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

E, se necessario, nascondi il loginModalmodale.

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

Ovviamente puoi implementare la tua logica all'interno dell'ascoltatore per decidere se mostrare o meno il adminPanelmodale.

Puoi ottenere maggiori informazioni sugli eventi modali Bootstrap qui .

In bocca al lupo.

I modelli Bootstrap aggiungono quell'imbottitura direttamente al corpo se il corpo è traboccante.

Su bootstrap 3.3.6 (la versione che sto usando) questa è la funzione responsabile dell'aggiunta di quel padding-right all'elemento body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Una soluzione rapida consiste nel sovrascrivere semplicemente quella funzione dopo aver chiamato il file bootstrap.js:

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

Questo ha risolto il problema per me.

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

Questo è ciò che ha funzionato per me:

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

Basta rimuovere il data-targetdal pulsante e caricare il modale utilizzando jQuery.

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

jQuery:

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

Ho scavato nel javascript bootstrap e ho scoperto che il codice Modal imposta il riempimento corretto in una funzione chiamata adjustDialog()che è definita sul prototipo Modal ed esposta su jQuery. Posizionare il seguente codice da qualche parte per sovrascrivere questa funzione per non fare nulla ha funzionato per me (anche se non so quale sia la conseguenza di non impostarlo ancora !!)

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

Questo può risolvere il problema

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

Questo è un bug di bootstrap e risolto in v4-dev: https://github.com/twbs/bootstrap/pull/18441 fino ad allora l'aggiunta della classe CSS di seguito dovrebbe aiutare.

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

Ho avuto lo stesso problema usando modals e ajax. Era perché il file JS è stato referenziato due volte, sia nella prima pagina che nella pagina chiamata da ajax, quindi quando modal è stato chiuso, ha chiamato due volte l'evento JS che, per impostazione predefinita, aggiunge un padding-right di 17px.

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

Ha funzionato per me. Nota che la barra di scorrimento è forzata nel corpo, ma se hai comunque una pagina "a scorrimento", non importa (?)

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

Prova questo

Aggiungerà il riempimento destro 0px al corpo dopo la chiusura modale.

Si verifica quando apri un modale che il modale precedente non è ancora completamente chiuso. Per risolverlo, apri un nuovo modale nel momento in cui tutti i modali sono completamente chiusi, controlla i codici di seguito:

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

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

Ora questo è vecchio e tutte le soluzioni offerte qui potrebbero funzionare. Sto solo aggiungendo qualcosa di nuovo nel caso in cui possa aiutare qualcuno: ho avuto lo stesso problema e ho notato che l'apertura del modale aggiungeva un margine destro al mio sidenav (probabilmente una sorta di eredità dall'imbottitura aggiunta al corpo). L'aggiunta di {margin-right: 0! Important;} al mio sidenav ha funzionato.

(Bootstrap v3.3.7) Dal mio ispettore del browser ho visto che questo è impostato direttamente nella proprietà dello stile dell'elemento , la strega sovrascrive le proprietà della classe.

Ho provato a 'resettare' il valore paddig-right quando il modal viene mostrato con:

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

Ma ritorna non appena la finestra viene ridimensionata :( (probabilmente dallo script pluggin).

Questa soluzione ha funzionato per me:

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

Come dice @Orland, se stai usando un effetto come la dissolvenza, allora dobbiamo aspettare prima di visualizzare il modale, questo è un po 'complicato ma farà il trucco.

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

Spero che ci sia ancora qualcuno che ha bisogno di questa risposta. C'è una funzione chiamata resetScrollbar () in bootstrap.js, per qualche stupida ragione gli sviluppatori hanno deciso di aggiungere le dimensioni della barra di scorrimento all'imbottitura destra del corpo. quindi tecnicamente se imposti il ​​riempimento a destra su una stringa vuota risolverà il problema