web-dev-qa-db-fra.com

Bootstrap 3 modal crée une barre de défilement à l'ouverture

J'essaie d'utiliser Bootstrap pour la première fois et je rencontre un problème avec les dialogues modaux. En utilisant l'exemple de code sur cette page , lorsque le modal est ouvert, une barre de défilement apparaît, ce qui décale également le contenu de la page à gauche.

Code:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JSFIDDLE: http://jsfiddle.net/WqRBP/

Beaucoup de sites que je regarde utilisent Bootstrap et n'ont pas ce problème. Y a-t-il une solution simple au problème?

EDIT: la barre de défilement apparaît dans Chrome et IE, je n'ai pas testé dans d'autres navigateurs.

Voici ce que je vois dans JSFIDDLE:

enter image description here

enter image description here

twitter-bootstraptwitter-bootstrap-3
15
Nate

Le problème est dû au fait que Twitter Bootstrap décale toujours la page 15px vers la gauche lorsqu'un modal est ouvert. Vous pouvez résoudre ce problème en déplaçant la page vers la droite - margin-right: -15px. Cela peut être fait en utilisant les événements show.bs.modal et hidden.bs.modal fournis par Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

FYI:

show.bs.modal: cet événement se déclenche immédiatement lorsque la méthode show instance est appelée. Si causé par un clic, l'élément cliqué est disponible en tant que propriété relatedTarget de l'événement.

hidden.bs.modal: cet événement est déclenché lorsque l'utilisateur a caché le modal (attend que les transitions CSS soient terminées).

Référence

16
lvarayut

La réponse de LVarayut m'a envoyé dans la bonne direction et ce que j'ai finalement utilisé est la suivante:

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0;
}

.modal {
    overflow-y: auto;
}
34
Nate

C'est si simple, il suffit d'ajouter à votre css:

body.modal-open{overflow:hidden!important;}

/*Optional:*/
.modal-open, .modal{padding-right:0!important}
4
Walky Toki

Ceci est ma solution: 

.modal {
 margin-right: -15px;
}`

et ajoutez ceci aussi

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

J'espère que cela vous aidera.

4
Joel Enanod Jr

Cette issue est résolue dans Bootstrap version 3.2.0, publiée le 23/06/2014.

Merci à @roadsunknown pour le lien (dans les commentaires de la question).

2
Ilya

C'est ma solution

#myModal{
    overflow:hidden;
}
body {
    overflow-y: scroll !important;
}

Avec cela, vous forcerez votre page à avoir une barre de défilement.

2
Tibs

Ce travail pour moi. Ça devrait marcher

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

Dans ce cas, vous pouvez écraser le css principal de bootstrap en utilisant votre propre css, ce qui peut parfois affecter les autres. c'est donc un code simple qui fonctionne

body.modal-open .modal {
    margin-right: -15px !important;
}

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

si vous voulez changer le css principal de bootstrap, mettez-le à jour

body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom {
    margin-right: 0 !important;
}
0
Shafiqul Islam

Essaye ça 

  .modal-open {
         overflow-y: auto
     }
0
Faazi Ahamed

cela a fait un tour pour moi

$('html').bind('hidden.bs.modal', function () {
   console.log('hidden');
   $("html").css("margin-right", "0px");
});

$('html').bind('hide.bs.modal', function () {
   console.log('hiding');
   $("html").css("margin-right", "-15px");
});

$('html').bind('show.bs.modal', function () {
   console.log('shown');
   $("html").css("margin-right", "-15px");
});
0
godblessstrawberry

Essayez avec les css suivants:

.modal{
    overflow:auto;
}

J'ai déjà résolu mon problème de cette façon.

0
monsur.hoq