38

Twitter ブートストラップ モーダル ダイアログを開くと、背景によってスクロールバーが表示され、コンテンツが移動します。

スクロールバーを回避するために、次の css を使用します。

.modal {
    overflow: hidden;
}

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

よろしく、マルコ

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

4

11 に答える 11

23

マルコ、

私はちょうど同じ問題を抱えていました。モーダルが最初に表示されたときに、 Bootstrap 3.0.0<body>が,にクラスを追加したようです。このクラスは、長いページにあるスクロールバーを考慮して本文にmodal-open追加します。margin-right: 15pxスクロールバーが本体にない短いページを除いて、これは素晴らしいことです。スクロールバーがない場合、margin-right により、モーダルを開いたときに本文が左にシフトします。

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

これらを組み合わせることで、margin-right スクロールバーの修正は長いページでは機能しますが、短いページでは無効になります (ドキュメントの高さ <= ウィンドウの高さの場合)。これが役立つことを願っています！

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

編集：

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');
      }
    });
});
于 2013-11-13T17:33:52.417 に答える
21

私にとっては、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
于 2015-04-01T14:20:28.257 に答える
16

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

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

重要なのは、パディングとマージンの変更によるブートストラップと、モーダル オープン クラスおよびスタイルのオーバーラップです。

于 2015-03-02T17:43:58.010 に答える
16

これを試して

body.modal-open {
overflow: auto;
}
于 2013-10-10T16:50:31.553 に答える
5

ブートストラップモーダルを開くと、スクロールバーが消え、ボディが左にシフトするという同じ問題がありました。

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

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

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

皆さんお元気で！

于 2015-10-08T12:46:37.467 に答える
4 
body {
    /*prevent modal background jumping*/
    padding-right:0px !important;
    margin-right:0px !important;
}

/*prevent modal background jumping*/
body.modal-open {
    overflow: auto;
}
于 2015-09-03T11:39:22.787 に答える
0

この単純な JavaScript を試してください。

$j(document).ready(function() {
     if ($(document).height() <= $(window).height()) {
         $('body').css('margin-right','0','!important');
      }      
 });
于 2016-05-03T12:57:32.183 に答える
0

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

.modal-open {
    margin-right: 15px;
}
于 2015-12-23T16:41:19.477 に答える
0

次の .css ファイルへのインクルードにより、ポップアップ モーダルが表示されたときに中央のコンテンツ ページが移動またはサイズ変更されないように修正されました。

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

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

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

ブートストラップ 3.3.7 を使用しています。

于 2017-08-08T17:10:35.033 に答える