Question

当我打开twitter bootstrap模式对话框时，背景会导致滚动条并移动内容。

为了避免滚动条我使用这个css：

.modal {
    overflow: hidden;
}

但我无法避免这种转变。

的问候，马尔科

我正在使用Bootstrap第3版

Answer 1

的Marko，

我遇到了同样的问题。当模态首次显示时，似乎Bootstrap 3.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);

这些组合允许边距右滚动条修复适用于长页面，但是对于较短页面禁用（当文档高度<=窗口高度时）。我希望这有帮助！

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

Answer 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

Answer 3

试试这个

body.modal-open {
overflow: auto;
}

Answer 4

我很容易（仅限CSS）：

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

事实是！important是重叠的bootstrap与更改填充和边距与模态打开类和样式。

Answer 5

我有同样的问题，滚动条消失了，打开引导模式时身体向左移动。

我发现了一个简单的解决方法：

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

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

祝所有人好运！

Answer 6

body {
    /*prevent modal background jumping*/
    padding-right:0px !important;
    margin-right:0px !important;
}

/*prevent modal background jumping*/
body.modal-open {
    overflow: auto;
}

Answer 7

最好的方法是：

添加到BODY overflow-y：滚动
并从bootstrap.js中移除4个函数：checkScrollbar，setScrollbar，resetScrollbar和measureScrollbar。

Answer 8

我将此添加到我的CSS中，并且在添加“固定”叠加层以查看

时似乎有效

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

Answer 9

试试这个简单的javascript：

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

Answer 10

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

$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');
    })
  })

Answer 11

以下包含在我的.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。

如何在加载twitter引导模式对话框时阻止身体滚动条和移位？

11 个答案: