Les modaux Bootstrap continuent d'ajouter du rembourrage au corps après la fermeture

J'utilise bootstrap et Parse Framework pour créer une petite application Web. Mais ces modaux Bootstrap continuent d'ajouter du rembourrage au corps après la fermeture. Comment résoudre ça?

J'ai essayé de mettre ce code dans mon javascript:

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

Mais ça ne marche pas. Est-ce que quelqu'un sait comment réparer ceci?

Mon code:

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

J'utilise bootstrap et Parse Framework pour créer une petite application Web. Mais ces modaux Bootstrap continuent d'ajouter du rembourrage au corps après la fermeture. Comment résoudre ça?

Cela pourrait être un problème de Bootstrap modal. D'après mes tests, il semble que le problème est que l' #adminPanelinitialisation est en cours alors qu'elle #loginModaln'a pas encore été totalement fermée. Les solutions de contournement peuvent être de supprimer l'animation en supprimant la fadeclasse sur #adminPanelet / #loginModalou en définissant un délai d'expiration (~ 500 ms) avant d'appeler $('#adminPanel').modal();. J'espère que cela t'aides.

Je viens d'utiliser le correctif css ci-dessous et cela fonctionne pour moi

body { padding-right: 0 !important }

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

Juste changé en

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

Une solution pure css qui conserve la fonctionnalité d'amorçage comme elle se doit.

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

Le problème est causé par une fonction dans le jQuery bootstrap qui ajoute un peu de padding-right lorsqu'une fenêtre modale s'ouvre, s'il y a une barre de défilement sur la page. Cela empêche le contenu de votre corps de se déplacer lorsque le modal s'ouvre, et c'est une fonctionnalité intéressante. Mais cela cause ce bug.

Un grand nombre des autres solutions proposées ici interrompent cette fonctionnalité et font légèrement changer votre contenu lorsque le modal s'ouvre. Cette solution préservera la fonctionnalité du modal bootstrap sans déplacer le contenu, mais corrigera le bogue.

Si vous êtes plus préoccupé par le padding-rightproblème, vous pouvez le faire

jQuery :

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

cette volonté addClassà votre bodypuis en utilisant ceci

CSS :

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

et cela vous aidera à vous en débarrasser padding-right.

Mais si vous êtes également préoccupé par la dissimulation, scrollvous devez également ajouter ceci:

CSS :

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

Voici le JSFiddle

Jetez un œil, cela fera l'affaire pour vous.

Ouvrez simplement bootstrap.min.css

Trouver cette ligne (par défaut)

.modal-open{overflow:hidden;}

et changez-le comme

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

Cela fonctionnera pour chaque modal du site. Vous pouvez faire un débordement: auto; si vous souhaitez conserver la barre de défilement telle quelle lors de l'ouverture de la boîte de dialogue modale.

J'ai eu ce même problème pendant TRES longtemps. Aucune des réponses ici n'a fonctionné! Mais ce qui suit l'a corrigé!

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

Il y a deux événements qui se déclenchent à la fermeture d'un modal, d'abord c'est hide.bs.modal, puis c'est hidden.bs.modal. Vous devriez pouvoir en utiliser un seul.

solution facile

ajouter cette classe

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

C'est un remplacement mais fonctionne

Je viens de supprimer la fadeclasse et de modifier l'effet de fondu de classe avec animation.css. J'espère que cela aidera.

removeAttr ne fonctionnera pas, vous supprimerez la propriété CSS comme ceci:

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

Sans valeur de propriété, la propriété est supprimée.

Je charge le CSS par défaut bootstrap 3.3.0 et j'ai un problème similaire. Résolu en ajoutant ce CSS:

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

L'important est que le javascript modal bootstrap ajoute 15px de remplissage vers la droite par programme. Je suppose que c'est pour compenser la barre de défilement, mais je ne veux pas cela.

Avec Bootstrap 4, cela a fonctionné pour moi:

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

J'ai le même problème avec Bootstrap 3.3.7 et ma solution pour la barre de navigation fixe: ajouter ce style à votre css personnalisé.

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

cela rendra votre modal affiché pendant que la fenêtre de défilement fonctionnera toujours. merci, j'espère que cela vous aidera aussi

Je sais que c'est une vieille question, mais aucune des réponses d'ici n'a supprimé le problème dans mes situations similaires et j'ai pensé qu'il serait utile que certains développeurs lisent également ma solution.

J'utilise pour ajouter du CSS au corps lorsqu'un modal est ouvert, dans les sites Web où il est encore utilisé bootstrap 3.

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

Ma solution ne nécessite aucun CSS supplémentaire.

Comme indiqué par @Orland, un événement se produit toujours lorsque l'autre démarre. Ma solution consiste à démarrer le deuxième événement (en affichant le adminPanelmodal) uniquement lorsque le premier est terminé (en masquant le loginModalmodal).

Vous pouvez accomplir cela en attachant un auditeur à l' hidden.bs.modalévénement de votre loginModalmodal comme ci-dessous:

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

Et, si nécessaire, masquez simplement le loginModalmodal.

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

De couse vous pouvez implémenter votre propre logique à l'intérieur de l'auditeur afin de décider d'afficher ou non le adminPanelmodal.

Vous pouvez obtenir plus d'informations sur les événements modaux Bootstrap ici .

Bonne chance.

Les modèles Bootstrap ajoutent ce rembourrage directement au corps si le corps déborde.

Sur bootstrap 3.3.6 (la version que j'utilise), c'est la fonction chargée d'ajouter ce padding-right à l'élément body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Une solution rapide consiste simplement à remplacer cette fonction après avoir appelé le fichier bootstrap.js:

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

Cela a résolu le problème pour moi.

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

C'est ce qui a fonctionné pour moi:

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

Retirez simplement le data-targetdu bouton et chargez le modal en utilisant jQuery.

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

jQuery:

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

J'ai creusé dans le javascript bootstrap et j'ai trouvé que le code Modal définit le bon remplissage dans une fonction appelée adjustDialog()qui est définie sur le prototype Modal et exposée sur jQuery. Placer le code suivant quelque part pour remplacer cette fonction pour ne rien faire a fait l'affaire pour moi (même si je ne sais pas quelle est la conséquence de ne pas encore définir cela !!)

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

Cela peut résoudre le problème

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

Ceci est un bogue d'amorçage et corrigé dans v4-dev: https://github.com/twbs/bootstrap/pull/18441 jusqu'à ce que l'ajout de la classe CSS ci-dessous devrait aider.

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

J'ai eu le même problème en utilisant les modaux et ajax. C'était parce que le fichier JS était référencé deux fois, à la fois dans la première page et dans la page appelée par ajax, donc lorsque modal a été fermé, il a appelé l'événement JS deux fois qui, par défaut, ajoute un padding-right de 17px.

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

A travaillé pour moi. Notez que la barre de défilement est forcée dans le corps - mais si vous avez de toute façon une page "défilante", cela n'a pas d'importance (?)

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

Essaye ça

Il ajoutera le padding right 0px au corps après la fermeture modale.

Cela se produit lorsque vous ouvrez un modal que le modal précédent n'est pas encore complètement fermé. Pour résoudre ce problème, ouvrez simplement un nouveau modal au moment où tous les modaux sont complètement fermés, vérifiez les codes ci-dessous:

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

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

Je maintenant cela est vieux, et toutes les solutions proposées ici peuvent fonctionner. J'ajoute simplement quelque chose de nouveau au cas où cela pourrait aider quelqu'un: j'ai eu le même problème et j'ai remarqué que l'ouverture du modal ajoutait une marge droite à mon sidenav (probablement une sorte d'héritage du rembourrage ajouté au corps). Ajouter {margin-right: 0! Important;} à mon sidenav a fait l'affaire.

(Bootstrap v3.3.7) De mon inspecteur de navigateur, j'ai vu que cela est directement défini dans la propriété de style d' élément , la sorcière remplace les propriétés de classe.

J'ai essayé de `` réinitialiser '' la valeur paddig-right lorsque le modal est affiché avec:

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

Mais il revient dès que la fenêtre est redimensionnée :( (probablement à partir du script pluggin).

Cette solution a fonctionné pour moi:

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

Comme le dit @Orland, si vous utilisez un effet comme le fondu, nous devons attendre avant d'afficher le modal, c'est un peu piraté mais cela fera l'affaire.

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

J'espère qu'il y a encore quelqu'un qui a besoin de cette réponse. Il existe une fonction appelée resetScrollbar () dans bootstrap.js, pour une raison stupide, les développeurs ont décidé d'ajouter les dimensions de la barre de défilement à la droite de remplissage du corps. Donc, techniquement, si vous définissez simplement le remplissage à droite sur une chaîne vide, cela résoudra le problème