Comment puis-je empêcher le corps scrollbar et le déplacement lorsque le Dialogue modal bootstrap twitter est chargé?

quand j'ouvre le Dialogue modal bootstrap twitter, la toile de fond provoque une barre de défilement et déplace 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

j'utilise Bootstrap Version 3

34
demandé sur Paolo 2013-10-10 10:26:19

11 réponses

Marko,

je viens d'avoir 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 au corps pour rendre compte d'une barre de défilement, qui est là sur des pages plus longues. C'est génial, sauf pour les pages plus courtes quand une barre de défilement n'est pas sur le corps. Dans le cas no scrollbar, la marge droite provoque le déplacement du corps à gauche sur modal open.

j'ai pu résoudre cela 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);

ceux-ci combinés permettent au correctif de marge-barre de défilement droit de fonctionner pour les longues pages, mais est désactivé pour les pages plus courtes (lorsque la hauteur du document <= 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 le suivantes:

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

EDIT:

à la lumière de Mac éliminant les barres de défilement d'habiter la largeur de rendu de fenêtre, voici une solution plus portable (3.0.1+) si vous n'avez pas d'objection à une détection de fonctionnalité. 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
répondu ianmstew 2014-04-11 02:57:49

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
répondu obiwahn 2016-02-01 15:02:23

Essayez ceci

body.modal-open {
overflow: auto;
}
16
répondu Dinesh Kanivu 2013-10-24 11:10:52

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 bootstrap de changer le rembourrage et la marge avec la classe modale-ouverte et les styles.

15
répondu KrondaliX 2015-03-02 17:43:58

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

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!

4
répondu Marius Stefanescu 2015-10-08 12:46:37 
body {
    /*prevent modal background jumping*/
    padding-right:0px !important;
    margin-right:0px !important;
}

/*prevent modal background jumping*/
body.modal-open {
    overflow: auto;
}
3
répondu SERG 2015-09-03 15:35:42

la meilleure façon est:

  • pour les ajouter à CORPS overflow-y: scroll
  • et supprimer 4 fonctions de bootstrap.js:checkScrollbar,setScrollbar,resetScrollbar et measureScrollbar.
0
répondu kriwec 2015-11-09 05:09:42

j'ai ajouté ceci à mon CSS et cela a semblé fonctionner lors de l'ajout d'une superposition 'fixe' pour voir

.modal-open {
    margin-right: 15px;
}
0
répondu Scott Murphy 2015-12-23 16:41:19

Vous devriez essayer ceci. 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
répondu Rahul Gupta 2016-05-03 13:15:34

essayez ce javascript simple:

$j(document).ready(function() {
     if ($(document).height() <= $(window).height()) {
         $('body').css('margin-right','0','!important');
      }      
 });
0
répondu Rahul Gupta 2016-05-05 16:27:58

La suite de l'inclusion de mon .le fichier css a corrigé ma page de contenu centrée à partir du déplacement ou du redimensionnement lorsque le modal popup s'affiche.

Je n'avais pas besoin de Javascript, juste le code css ci-dessous. Cela le fixe pour le contenu avec ou sans une 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
répondu Carlo Bos 2017-08-08 17:10:35