web-dev-qa-db-ja.com

Twitter bootstrap=モーダルダイアログがロードされているときに、ボディのスクロールバーとシフトを防ぐにはどうすればよいですか？

Twitter bootstrap=モーダルダイアログを開くと、背景にスクロールバーが表示され、コンテンツがシフトされます。

スクロールバーを避けるために、私はこのCSSを使用します：

.modal {
    overflow: hidden;
}

しかし、私はシフトを避けることはできません。

よろしく、マルコ

Bootstrapバージョン3を使用しています

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

マルコ、

私はちょうど同じ問題を抱えていました。 Bootstrap3.0.0は<body>、modal-open、このクラスは、長いページにあるスクロールバーを説明するために、ボディにmargin-right: 15pxを追加します。これは、スクロールバーがボディにない場合の短いページを除いて素晴らしいことです。スクロールバーを使用しない場合、マージンを右にすると、モーダルを開いたときにボディが左に移動します。

いくつかの短いJavascriptと少しの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);

これらの組み合わせにより、右端のスクロールバーの修正は長いページで機能しますが、短いページでは無効になります（ドキュメントの高さ<=ウィンドウの高さの場合）。これがお役に立てば幸いです！

ブートストラップ3.0.1+（3.1.1までテスト済み）は別の話です。以下を試してください：

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 [〜＃〜]：

Macがウィンドウレンダリングの幅からスクロールバーを排除することを考慮して、機能の検出を気にしない場合は、よりポータブルなソリューション（3.0.1以降）を使用します。リファレンス： 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

私にとっては、2つの答えの組み合わせだけが機能しました。

css：

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

body.modal-open {
    overflow: auto;
}

スタイラス：

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

これを試して

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

私の場合は簡単です（CSSのみ）：

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

実際、！importantは、bootstrapモーダルオープンクラスとスタイルでパディングとマージンを変更することで重複しています。

15
KrondaliX

bootstrap modal。

私は簡単な修正を見つけました：

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

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

皆さんお元気で！

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

このシンプルなjavascriptを試してください：

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

最善の方法は次のとおりです。

  • bODY overflow-yに追加するには：scroll
  • bootstrap.jsからcheckScrollbar、setScrollbar、resetScrollbar、およびmeasureScrollbarの4つの関数を削除します。
0
kriwec

次の.cssファイルに含めることにより、ポップアップモーダルが表示されたときに中央のコンテンツページが移動したりサイズ変更されたりするのを修正しました。

Javascriptは必要なく、以下のCSSコードだけが必要でした。これにより、垂直または水平スクロールバーの有無にかかわらずコンテンツの問題が修正されました。

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

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

私はbootstrap 3.3.7。

0
Carlo Bos

これを試してみてください。これは正常に機能しています。

$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

これをCSSに追加し、「固定」オーバーレイをビューに追加すると機能するように見えました

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