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

对我来说，只有两个答案的组合有效。

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

事实是 !important 是通过改变 padding 和 margin 与 modal-open 类和样式重叠的引导程序。

于 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

最好的方法是：

  • 添加到 BODY 溢出-y：滚动
  • 并从 bootstrap.js 中删除 4 个函数：checkScrollbar、setScrollbar、resetScrollbar和measureScrollbar.
于 2014-10-07T15:47:31.407 回答
0

我的 .css 文件中包含的以下内容修复了我的居中内容页面在弹出模式显示时移动或调整大小。

我不需要任何 Javascript，只需要下面的 css 代码。这修复了带有或不带有垂直或水平滚动条的内容。

.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 回答
0

我将此添加到我的 CSS 中，并且在添加“固定”叠加层以查看时似乎可以正常工作

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

你应该试试这个。这工作正常。

$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');
    })
  })
于 2016-05-03T13:15:34.133 回答
0

试试这个简单的javascript：

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