Css 加载twitter引导模式对话框时，如何防止正文滚动条和移动？

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

为了避免滚动条，我使用以下css：

.modal {
    overflow: hidden;
}

但我无法避免这种转变

问候,， 马尔科

我正在使用Bootstrap版本3

试试这个

body.modal-open {
overflow: auto;
}

马尔科

我也有同样的问题。当模式第一次显示时，引导3.0.0向

，

模式打开添加了一个类。这个类将
右边距：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;
}

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

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

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

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

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

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

JS:

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

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

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

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

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

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

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

这些组合允许边距右侧滚动条修复在长页面上工作，但在短页面上禁用（当文档高度时，最好的方法是：


要添加到正文溢出-y：滚动
并从bootstrap.js中删除4个函数：
checkScrollbar
，
setScrollbar
，
resetScrollbar
，以及
measureScrollbar
我的很简单（仅限于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;
}

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

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

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

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

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

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

触笔：

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

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

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

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

.scrollbar-measure {
    height: 100px;
    overflow: scroll;
    position: absolute;
    top: -9999px;
}

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

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

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

我找到了一个简单的解决方法：

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

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

祝大家好运！
我将此添加到我的CSS中，并且在添加“固定”覆盖视图时似乎起到了作用

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

尝试以下简单的javascript：

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

$j（文档）.ready（函数（）{
如果（$（document）.height（）您应该试试这个。这样做很好

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

$j（文档）.ready（函数（）{
$（'.modal'）.on（'show.bs.modal'，函数（）{
如果（$（document）.height（）在my.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。
是的，我也遇到了同样的问题，您需要为backdrop设置overflow:hidden。我已经尝试过了，但问题仍然存在：。模式背景{overflow:hidden；}您好，我已经尝试了您的解决方案。类已添加到body元素，但滚动条已经存在。Bootstrap 3.0.2版本解决了移位问题。Marko，我完全没有听到您的评论。感谢更新，我将查看最新的Bootstrap。它似乎是“文档高度vs窗口高度”-检查是否颠倒了？当我将“更大”或“相等”替换为“更小”或“相等”时，此解决方案对我有效…我再次查看并确定了3.0.0和3.0.1+之间的差异（上面编辑）。在本例中，我使用了“小于”，但也更改了CSS。我再也无法访问原始源代码（存在问题的地方）。但我已经测试过了，它似乎可以按预期工作。这对我来说是有效的。糟糕的是，这应该在3.0.2中解决，而问题仍然存在于3.3.2中。宾果-这是唯一对我完全有效的解决方案。谢谢！体类应用于哪个dom元素？谢谢，谢谢！这应该是可以接受的答案。我正在使用bootstrap 3.3.5这是一个更好的解决方案，稍加修改…body.modal-open{overflow-y:auto；overflow-x:hidden；}也适用于3.3.6。非常感谢！！为3.3.7节省了我的时间！Thx！请为您的答案添加一些解释。