web-dev-qa-db-fra.com

Comment puis-je empêcher la barre de défilement du corps et le décalage lorsque le dialogue modal d'amorçage Twitter est chargé?

Lorsque j'ouvre la boîte de dialogue modale d'amorçage Twitter, l'arrière-plan crée une barre de défilement et en décale le contenu. 

Pour éviter la barre de défilement, j'utilise ce css:

.modal {
    overflow: hidden;
}

Mais je ne peux pas éviter le décalage.

cordialement, Marko

J'utilise Bootstrap Version 3

csstwitter-bootstraptwitter-bootstrap-3bootstrap-modal
34
Marko

Marko,

Je viens d'avoir le même problème. Il semble que Bootstrap 3.0.0 ajoute une classe à <body>, modal-open, lors du premier affichage du modal. Cette classe ajoute margin-right: 15px au corps pour prendre en compte une barre de défilement, présente sur les pages plus longues. C'est excellent, sauf pour les pages plus courtes lorsqu'une barre de défilement n'est pas sur le corps. Dans le cas où aucune barre de défilement n'est disponible, la marge-droite provoque le décalage du corps à gauche en mode modal ouvert.

J'ai pu résoudre ce problème en ajoutant un peu de 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);

Ces éléments combinés permettent au correctif de la barre de défilement marge-droite de marcher sur les pages longues, mais il est désactivé pour les pages plus courtes (lorsque hauteur du document <= hauteur de la fenêtre). J'espère que ça aide!

Bootstrap 3.0.1 + (testé jusqu’à la version 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 éliminant les barres de défilement de la largeur de rendu de la fenêtre, voici une solution plus portable (3.0.1+) si la détection de fonctionnalités ne vous gêne pas. 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');
      }
    });
});
22
ianmstew

Pour moi, seule la combinaison de deux réponses a fonctionné.

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
20
obiwahn

Essaye ça

body.modal-open {
overflow: auto;
}
16
Dinesh Kanivu

Le mien est facile là-bas (CSS uniquement):

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

Le fait est que l'important est le chevauchement du bootstrap, dû à la modification du padding et de la marge avec la classe et les styles à ouverture modale.

15
KrondaliX

J'ai eu le même problème avec la barre de défilement qui disparaissait et le corps se déplaçant vers la gauche lors de l'ouverture d'un modal bootstrap. 

J'ai découvert une solution facile: 

.modal
{
    overflow-y: auto !important;
}

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

Bonne chance à tous!

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

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

Essayez ce javascript simple: 

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

le meilleur moyen est:

  • ajouter à BODY overflow-y: faites défiler
  • et supprimez 4 fonctions de bootstrap.js: checkScrollbar, setScrollbar, resetScrollbar et measureScrollbar.
0
kriwec

L'inclusion suivante dans mon fichier .css a empêché le déplacement ou le redimensionnement de ma page de contenu centrée lorsque la modale contextuelle s'affiche.

Je n'ai pas besoin de Javascript, juste du code css ci-dessous. Cela corrigeait le contenu avec ou sans barre de défilement verticale ou horizontale. 

.modal
{
    overflow-y: auto !important;
}

.modal-open {
    overflow: auto !important;
    overflow-x: hidden !important;
    padding-right: 15px !important;
}

J'utilise bootstrap 3.3.7. 

0
Carlo Bos

Tu devrais essayer ça. 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');
    })
  })
0
Rahul Gupta

J'ai ajouté ceci à mon CSS et semblait fonctionner lors de l'ajout d'une superposition "fixe" pour afficher

.modal-open {
    margin-right: 15px;
}
0
Scott Murphy