web-dev-qa-db-fra.com

Bootstrap Modals continue d’ajouter du rembourrage à son corps après sa fermeture

J'utilise bootstrap et le framework Parse pour construire une petite application web. Mais ces modaux Bootstrap continuent d’ajouter du rembourrage au corps après les avoir fermés. Comment résoudre ceci?

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 le framework Parse pour construire une petite application web. Mais ces modaux Bootstrap continuent d’ajouter du rembourrage au corps après les avoir fermés. Comment résoudre ceci?

javascriptjqueryhtmlcsstwitter-bootstrap
72
phuwin

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

44
Orland

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

body { padding-right: 0 !important }
87
Ngatia Frankline

Ajoutez juste un style comme ça:

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

Si vous êtes plus préoccupé par le problème lié à padding-right, vous pouvez le faire.

jQuery:

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

addClass à votre body et ensuite utiliser cette 

CSS:

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

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

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

CSS:

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

Voici le JSFiddle

S'il vous plaît jeter un oeil, il fera l'affaire pour vous.

11
vivekkupadhyay

J'ai eu ce même problème pendant très longtemps. Aucune des réponses ici n'a fonctionné! Mais ce qui suit a résolu le problème!

$(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 et ensuite hidden.bs.modal. Vous devriez pouvoir utiliser un seul.

10
LXXIII

Il suffit d'ouvrir bootstrap.min.css

Trouver 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 souhaitez conserver la barre de défilement telle quelle lors de l’ouverture du dialogue modal.

8
Ashok Sen

Une solution pure css qui maintient la fonctionnalité d'amorçage 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 bourrage à droite 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 est ouvert, et c'est une fonctionnalité intéressante. Mais cela cause ce bug.

Une grande partie des solutions proposées ici supprime cette fonctionnalité et modifie légèrement le contenu par rapport à l'ouverture du modal. Cette solution préservera la fonctionnalité du modal bootstrap en ne déplaçant pas le contenu, mais en corrigeant le bogue. 

6
chasmani

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.

2
jcdsr

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

2
febriana andringa

solution facile

ajouter cette classe 

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

C'est une dérogation mais fonctionne

1
Benjamin Oats

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

Sur bootstrap 3.3.6 (la version que j'utilise), c'est la fonction responsable de l'ajout de 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 à écraser simplement 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.

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

Supprimez simplement le data-target du bouton et chargez le modal à l’aide de jQuery. 

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

jQuery:

$("#myBtn").modal('show');
1
Edison D'souza

Je suis en train de charger le CSS par défaut de bootstrap 3.3.0 et avait un problème similaire . Résolu en ajoutant ce CSS:

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

Le point important est que javascript modal de bootstrap ajoute 15px de bourrage au programme approprié. J'imagine que c'est pour compenser la barre de défilement, mais je ne le souhaite pas.

1
gauravbhai daxini

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

J'utilise pour ajouter des CSS au corps quand 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;
        }
1
Madalina Taina

Ma solution ne nécessite pas de CSS supplémentaire.

Comme l'a souligné @Orland, un événement se produit toujours lorsque l'autre commence. Ma solution consiste à démarrer le deuxième événement (affichant le modal adminPanel) uniquement lorsque le premier est terminé (masquant le modal loginModal.

Vous pouvez accomplir cela en attachant un écouteur à l'événement hidden.bs.modal de votre modal 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');

Bien entendu, vous pouvez implémenter votre propre logique dans l’auditeur afin de décider de montrer ou non le modal adminPanel.

Vous pouvez obtenir plus d’informations sur Bootstrap Modal Events ici .

Bonne chance.

1
Cleber de Souza Alcântara

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

0
Lucas Almeida

J'ai fouillé dans le javascript javascript et découvert que le code modal définit le remplissage adéquat 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 écraser cette fonction et ne rien faire a tout gâché (bien que je ne sache pas quelle est la conséquence de ne pas le définir, c'est encore !!)

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

0
Phil

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

votre modal sera affiché alors que la fenêtre de défilement fonctionne toujours ... Merci, espérons que cela vous aidera aussi

0
Debrian Ruhut Saragih

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

C’est un bogue d’amorçage corrigé dans v4-dev: https://github.com/twbs/bootstrap/pull/18441 L’ajout de la classe ci-dessous devrait aider.

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

Il 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');
    });
  }
0
Sakata Gintoki
$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

Essaye ça 

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

0
sibaspage
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 (?)

0
user3666136

Cela peut résoudre le problème

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

Avec Bootstrap 4, cela a fonctionné pour moi:

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