wake-up-neo.com

Wie kann ich die Bildlaufleiste und das Verschieben des Körpers verhindern, wenn der modulare Dialog von Twitter-Bootstrap geladen wird?

Wenn ich den modalen Dialog von Twitter-Bootstrap öffne, bewirkt der Hintergrund eine Bildlaufleiste und verschiebt den Inhalt. 

Um die Bildlaufleiste zu vermeiden, verwende ich folgende CSS:

.modal {
    overflow: hidden;
}

Aber ich kann die Verschiebung nicht vermeiden.

viele Grüße Marko

Ich benutze Bootstrap Version 3

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

Marko,

Ich hatte gerade das gleiche Problem. Es scheint, dass Bootstrap 3.0.0 eine Klasse zu <body>, modal-open hinzufügt, wenn das modal zuerst angezeigt wird. Diese Klasse fügt margin-right: 15px zum Hauptteil hinzu, um eine Bildlaufleiste zu berücksichtigen, die auf längeren Seiten vorhanden ist. Das ist großartig, außer für kürzere Seiten, wenn sich keine Bildlaufleiste im Körper befindet. In dem Fall ohne Bildlaufleiste bewirkt der rechte Rand, dass der Körper bei modalem Öffnen nach links verschoben wird.

Ich konnte dieses Problem lösen, indem ich ein kurzes Javascript und ein wenig CSS hinzufügte:

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

Diese Kombination ermöglicht die Korrektur der Seitenleiste rechts für lange Seiten, ist jedoch für kürzere Seiten deaktiviert (wenn Dokumenthöhe <= Fensterhöhe). Ich hoffe das hilft!

Bootstrap 3.0.1 + (getestet bis 3.1.1) ist eine andere Geschichte. Versuche Folgendes:

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:

In Anbetracht der Tatsache, dass Mac Bildlaufleisten aus der Fensterbreite des Fensters entfernt, ist eine tragbarere Lösung (3.0.1 und höher) vorhanden, wenn Sie die Erkennung von Funktionen nicht behindern. Referenz: 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

Bei mir funktionierte nur die Kombination zweier Antworten.

css: 

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

body.modal-open {
    overflow: auto;
}

Stift: 

body
  padding-right:0px !important
  margin-right:0px !important
  &.modal-open
    overflow: auto
20
obiwahn

Versuche dies

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

Meine ist einfach da (CSS Only):

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

Die Tatsache ist, dass es wichtig ist, dass Bootstrap sich durch das Ändern von Polsterung und Rand mit der modal-open-Klasse und den Stilen überschneidet.

15
KrondaliX

Das gleiche Problem hatte ich, als die Bildlaufleiste verschwand und der Körper beim Öffnen eines Bootstrap-Modals nach links verschoben wurde. 

Ich habe eine einfache Lösung gefunden: 

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

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

Viel Glück für jeden!

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

Probieren Sie dieses einfache Javascript aus: 

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

der beste Weg ist:

  • zu BODY overflow-y hinzufügen: scrollen
  • und entfernen Sie 4 Funktionen aus bootstrap.js: checkScrollbar, setScrollbar, resetScrollbar und measureScrollbar.
0
kriwec

Durch die folgende Aufnahme in meine .css-Datei wurde die zentrierte Inhaltsseite nicht mehr verschoben oder ihre Größe geändert, wenn das Popup-Modal angezeigt wird.

Ich brauchte kein Javascript, nur den CSS-Code unten. Dies wurde behoben für Inhalte mit oder ohne vertikale oder horizontale Bildlaufleiste. 

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

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

Ich verwende Bootstrap 3.3.7. 

0
Carlo Bos

Sie sollten es versuchen. das funktioniert gut.

$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

Ich fügte dies zu meinem CSS hinzu und schien zu funktionieren, wenn ich ein "festes" Overlay zur Ansicht hinzufügte

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