Les modems bootstrap continuent d’append du padding-right au corps après avoir fermé

J’utilise un framework bootstrap et Parse pour créer une petite application Web. Mais ces modals Bootstrap continuent d’append du padding-right au corps après avoir fermé. Comment résoudre ce problème?

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:

     

  $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 un framework bootstrap et Parse pour créer une petite application Web. Mais ces modals Bootstrap continuent d’append du padding-right au corps après avoir fermé. Comment résoudre ce problème? J’utilise un framework bootstrap et Parse pour créer une petite application Web. Mais ces modals Bootstrap continuent d’append du padding-right au corps après avoir fermé. Comment résoudre ce problème?

Cela pourrait être un problème de Bootstrap modal. D’après mes tests, le problème est que #adminPanel est en cours d’initialisation alors que #loginModal n’a pas encore été complètement fermé. Les solutions de contournement peuvent supprimer l’animation en supprimant la classe de fade sur #adminPanel et #loginModal ou définir un délai d’attente (~ 500ms) avant d’appeler $('#adminPanel').modal(); . J’espère que cela t’aides.

Je viens d’utiliser le correctif CSS ci-dessous et ça marche pour moi

 body { padding-right: 0 !important } 

Ajoutez simplement un style comme celui-ci:

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

Si vous êtes plus préoccupé par la chose liée au padding-right , vous pouvez le faire

jQuery :

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

cela va addClass à votre body , puis en utilisant cette

CSS :

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

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

Mais si vous êtes également préoccupé par le scroll caché, vous devez également append ceci:

CSS :

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

Voici le JSFiddle

S’il vous plaît jeter un coup d’oeil, il fera l’affaire pour vous.

J’ai eu le même problème pendant très longtemps. Aucune des réponses ici n’a fonctionné! Mais les points suivants ont été corrigés!

 $(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 hide.bs.modal , puis hidden.bs.modal . Vous devriez pouvoir en utiliser un seul.

Une solution css pure qui conserve la fonctionnalité bootstrap comme il se doit.

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

Le problème est dû à une fonction dans le bootstrap jQuery 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 c’est à cause de ce bug.

Un grand nombre des autres solutions proposées ici brisent cette fonctionnalité et modifient légèrement le contenu à l’ouverture du modal. Cette solution préservera la fonctionnalité du modal bootstrap ne déplaçant pas le contenu, mais corrigera le bogue.

Il suffit d’ouvrir bootstrap.min.css

Trouvez cette ligne (par défaut)

 .modal-open{overflow:hidden;} 

et le changer comme

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

Cela fonctionnera pour chaque modal du site. Vous pouvez faire déborder: auto; si vous voulez garder la barre de défilement telle quelle en ouvrant la boîte de dialog modale.

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

removeAttr ne fonctionnera pas, vous devrez supprimer 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.

Supprimez simplement la data-target de data-target du bouton et chargez le modal en utilisant jQuery.

  

jQuery:

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

solution facile

append cette classe

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

C’est un remplacement mais fonctionne

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

J’utilise pour append du CSS au corps quand un modal est ouvert, sur les sites Web où il est encore utilisé 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 commence. Ma solution consiste à démarrer le deuxième événement (montrant le modal adminPanel ) uniquement lorsque le premier est terminé (en masquant le modal loginModal ).

Vous pouvez accomplir cela en joignant un écouteur à l’événement hidden.bs.modal de votre modal de loginModal comme ci-dessous:

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

Et, si nécessaire, masquez simplement le modal loginModal .

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

De couse vous pouvez implémenter votre propre logique dans l’auditeur afin de décider d’afficher ou non le modal adminPanel .

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

Bonne chance.

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

J’ai fouillé dans le javascript bootstrap et j’ai constaté 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 (bien que je ne sache pas quelle est la conséquence de ne pas le définir!)

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

Cela peut résoudre le problème

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

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 fonctionne toujours. merci, j’espère que cela vous aidera aussi

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

Travaillé pour moi Notez que la barre de défilement est forcée dans le corps – mais si vous avez une page “défilante” de toute façon, peu importe (?)

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

Essaye ça

Il appenda le remplissage droit 0px au corps après la fermeture modale.

Cela se produit lorsque vous ouvrez un modal dont le modal précédent n’est pas encore complètement fermé. Pour le réparer, 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'); }); } 

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

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

J’ai essayé de “réinitialiser” la valeur de 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 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 @Orland le dit, 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’ai essayé tellement de choses, mais j’ai travaillé très peu pour moi.

  body { font-size: 12px; font-family: brownFont; padding-right: 0 !important ; } 

Ceci est un bug bootstrap et corrigé dans v4-dev: https://github.com/twbs/bootstrap/pull/18441 jusqu’à ce que l’ajout de classes CSS soit utile.

 .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 était fermé, il appelait l’événement JS deux fois, ajoutant par défaut un droit de remplissage de 17px.

Les modèles Bootstrap ajoutent ce droit de remplissage au corps si le corps déborde.

Sur le bootstrap 3.3.6 (la version que j’utilise), c’est la fonction chargée d’append ce droit de remplissage à 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.

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

cela devrait résoudre le problème

 body { padding: 0 !important } 

Définir la position absolue sur le corps:

 body { position: absolute; } 

Le rembourrage n’affectera donc plus le corps.