Comment puis-je empêcher le corps de défilement et décaler lors de twitter bootstrap boîte de dialogue modale est chargé?

Quand j'ai ouvert le twitter bootstrap boîte de dialogue modale, la toile de fond provoque une barre de défilement et de décaler le contenu.

Pour éviter la barre de défilement-je utiliser ce css:

.modal {
    overflow: hidden;
}

Mais je ne peux pas éviter le passage.

ce qui concerne,
Marko

Je suis en utilisant Bootstrap Version 3

oui le même problème, j'ai aussi eu, vous devez faire overflow:hidden pour la toile de fond
J'ai essayé, mais le problème existe toujours: .modal-toile de fond { overflow:hidden; }

InformationsquelleAutor Marko | 2013-10-10

Marko,

J'ai juste eu le même problème. Il semble que Bootstrap 3.0.0 ajoute une classe à <body>, modal-open, lorsque le modal première montre. Cette classe ajoute margin-right: 15px à l'organisme pour le compte d'une barre de défilement, ce qui est là, sur plus de pages. C'est super, sauf pour de courtes pages quand une barre de défilement n'est pas sur le corps. Dans les pas de barre de défilement cas, la marge droite provoque le corps à décalage à gauche sur la modale de l'ouvrir.

J'ai été en mesure de résoudre ce problème en ajoutant quelques courtes Javascript et un peu de CSS:

CSS:

/* override bootstrap 3 class to remove scrollbar from modal backdrop
   when not necessary */
.modal {
  overflow-y: auto;
}
/* custom class to override .modal-open */
.modal-noscrollbar {
    margin-right: 0 !important;
}

JS:

(function($) {

$(document)
    .on( 'hidden.bs.modal', '.modal', function() {
        $(document.body).removeClass( 'modal-noscrollbar' );
    })
    .on( 'show.bs.modal', '.modal', function() {
        //Bootstrap adds margin-right: 15px to the body to account for a
        //scrollbar, but this causes a "shift" when the document isn't tall
        //enough to need a scrollbar; therefore, we disable the margin-right
        //when it isn't needed.
        if ( $(window).height() >= $(document).height() ) {
            $(document.body).addClass( 'modal-noscrollbar' );
        }
    });

})(window.jQuery);

La combinaison de ces permis la marge droite de la barre de défilement correctif de travailler pendant de longues pages, pourtant, est désactivée pour de courtes pages (lorsque la hauteur <= hauteur de la fenêtre). J'espère que cela aide!

Bootstrap 3.0.1+ (testé jusqu'à 3.1.1) est une autre histoire. Essayez ce qui suit:

CSS:

/* override bootstrap 3 class to remove scrollbar from modal backdrop
   when not necessary */
.modal {
  overflow-y: auto;
}
/* custom class to add space for scrollbar */
.modal-scrollbar {
    margin-right: 15px;
}

JS:

(function($) {

$(document)
    .on( 'hidden.bs.modal', '.modal', function() {
        $(document.body).removeClass( 'modal-scrollbar' );
    })
    .on( 'show.bs.modal', '.modal', function() {
        //Bootstrap's .modal-open class hides any scrollbar on the body,
        //so if there IS a scrollbar on the body at modal open time, then
        //add a right margin to take its place.
        if ( $(window).height() < $(document).height() ) {
            $(document.body).addClass( 'modal-scrollbar' );
        }
    });

})(window.jQuery);

MODIFIER:

À la lumière de Mac éliminer les barres de défilement à partir habiter fenêtre de rendu largeur, ici, est une solution portable (3.0.1+) si vous n'avez pas l'esprit de certaines fonctionnalités de détection. Référence: http://davidwalsh.name/detect-scrollbar-width

CSS:

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

JS:

window.jQuery(function() {
  //detect browser scroll bar width
  var scrollDiv = $('<div class="scrollbar-measure"></div>')
        .appendTo(document.body)[0],
      scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;

  $(document)
    .on('hidden.bs.modal', '.modal', function(evt) {
      //use margin-right 0 for IE8
      $(document.body).css('margin-right', '');
    })
    .on('show.bs.modal', '.modal', function() {
      //When modal is shown, scrollbar on body disappears.  In order not
      //to experience a "shifting" effect, replace the scrollbar width
      //with a right-margin on the body.
      if ($(window).height() < $(document).height()) {
        $(document.body).css('margin-right', scrollBarWidth + 'px');
      }
    });
});

Salut, j'ai essayé votre solution. Les classes sont ajoutées à l'élément de corps de mais la barre de défilement est déjà là. Avec le Bootstrap Version 3.0.2 la maj problème est résolu.
Marko, j'ai un peu raté totalement votre commentaire. Merci pour la mise à jour, je vais vérifier la dernière version de Bootstrap.
Il semble que le "document de hauteur vs hauteur de la fenêtre"-case est inversé? Cette solution fonctionne pour moi lorsque je remplace supérieur ou égal à inférieur ou égal
Intéressant... j'ai pris un autre regard et de déterminer une différence entre 3.0.0 et 3.0.1+ (édité ci-dessus). J'ai utilisé un moins-que dans ce cas, mais aussi changé le CSS.
Je n'ai pas accès au code source d'origine plus (d'où le problème existe pas). Mais je l'ai testé et il semble être comme on le souhaite. thx
J'ai trouvé sur mon Mac depuis OS X ont fait disparaître les barres de défilement, cette solution n'était plus efficace. J'ai ajouté une méthode qui consiste à renifler le navigateur de défilement de la largeur de la barre.
Je serais prudent sur l'utilisation de haut -9999px. Comme je me souviens de l'utiliser pour faire des certains cas où les navigateurs mobiles ont été d'essayer de dessiner les limites de l'écran de pixels et c'était vraiment s'enlise vers le bas.
Vous cloué! Merci!

InformationsquelleAutor ianmstew

21

Pour moi, seule la combinaison des deux réponses travaillé.

css:
```
body {
    padding-right:0px !important;
    margin-right:0px !important;
}

body.modal-open {
    overflow: auto;
}
```
stylet:
```
body
  padding-right:0px !important
  margin-right:0px !important
  &.modal-open
    overflow: auto
```
- merci man je vous remercie! Cela devrait être accepté de répondre. Je suis en utilisant bootstrap 3.3.5
- Son Travail!! 🙂
- Génial, super boulot!
- Voici une solution encore meilleure, une légère modification... corps.modal-ouvert { overflow-y: auto; overflow-x: hidden; }
- Fonctionne pour 3.3.6 ainsi. Merci beaucoup!!
- Sauvé ma soirée! Thx! Pour 3.3.7.
- de travail pour moi aussi
InformationsquelleAutor obiwahn
16

Essayer cette
```
body.modal-open {
overflow: auto;
}
```
- Cela ne fonctionne pas pour moi.
- J'ai mis à jour la réponse, Veuillez vérifier ma réponse
- Même sortie, j'ai mis à jour mon post, je suis en utilisant Bootstrap 3 ...
InformationsquelleAutor Dinesh Kanivu
15

Le mien est facile, il est là (CSS):
```
body {
padding-right:0px !important;
margin-right:0px !important;
}
```
Le fait est que le !important est le chevauchement de bootstrap à partir de la modification de rembourrage et de la marge avec le modal-classe ouverte et de styles.
- Ce qui a fonctionné pour moi. La poisse, c'est que c'était censé être corrigé en 3.0.2 et le problème existe toujours dans 3.3.2.
- Bingo, c'est la seule solution qui a fonctionné parfaitement pour moi. Merci!
- le corps de la classe est appliquée sur laquelle l'élément dom?
InformationsquelleAutor KrondaliX
4

J'ai eu le même problème avec la barre de défilement en train de disparaître, et le corps se déplace vers la gauche lors de l'ouverture d'un modal bootstrap.

J'ai trouvé une solution facile:
```
.modal
{
    overflow-y: auto !important;
}

.modal-open
{
   overflow:auto !important;
   overflow-x:hidden !important;
   padding-right: 0 !important;
}
```
Bonne chance à tous!
- BONJOUR cela fonctionne, merci!!!!!
InformationsquelleAutor Marius Stefanescu

body {
    /*prevent modal background jumping*/
    padding-right:0px !important;
    margin-right:0px !important;
}

/*prevent modal background jumping*/
body.modal-open {
    overflow: auto;
}

InformationsquelleAutor SERG

0

la meilleure façon est:
- à ajouter à CORPS overflow-y: scroll
- et de supprimer les 4 fonctions de bootstrap.js: checkScrollbar, setScrollbar, resetScrollbar, et measureScrollbar.
InformationsquelleAutor kriwec
0

J'ai ajouté à mon CSS et semblait fonctionner lors de l'ajout d'un "fixe" la superposition de vue
```
.modal-open {
    margin-right: 15px;
}
```
InformationsquelleAutor Scott Murphy

Vous devez l'essayer. cela fonctionne bien.

$j(document).ready(function() {
    $('.modal').on('show.bs.modal', function () {
      if ($(document).height() <= $(window).height()) {
        $('body').css('margin-right','0','!important');
      }
      else { 
       $('body').removeAttr('style');
      }
    })
    $('.modal').on('hide.bs.modal', function () {
        $('body').removeAttr('style');
    })
  })

InformationsquelleAutor Rahul Gupta

Essayez ce simple javascript:

$j(document).ready(function() {
     if ($(document).height() <= $(window).height()) {
         $('body').css('margin-right','0','!important');
      }      
 });

S'il vous plaît ajouter quelques explenation pour votre réponse.

InformationsquelleAutor Rahul Gupta

0

La suite de l'inclusion de mon .fichier css fixe mon centré sur le contenu de la page à partir de déplacer ou de redimensionner lorsque le popup modal affiche.

Je n'ai pas besoin de Javascript, juste le code css ci-dessous. Ce qu'il est corrigé pour le contenu, avec ou sans barre de défilement verticale ou à l'horizontale.
```
.modal
{
    overflow-y: auto !important;
}

.modal-open {
    overflow: auto !important;
    overflow-x: hidden !important;
    padding-right: 15px !important;
}
```
Je suis en utilisant bootstrap 3.3.7.

InformationsquelleAutor Carlo Bos

Vous devez vous connecter pour publier un commentaire.