CSS 加载 twitter bootstrap 模式对话框时,如何防止正文滚动条和移动?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19288546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:40:42  来源:igfitidea点击:

How can I prevent body scrollbar and shifting when twitter bootstrap modal dialog is loaded?

csstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

提问by Marko

When I open the twitter bootstrap modal dialog, the backdrop causes a scrollbar and shift the content.

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

To avoid the scrollbar I use this css:

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

.modal {
    overflow: hidden;
}

But I can not avoid the shift.

但我无法避免这种转变。

regards, Marko

问候, 马尔科

I am using Bootstrap Version 3

我正在使用 Bootstrap 版本 3

采纳答案by ianmstew

Marko,

马可,

I just had the same problem. It appears that Bootstrap 3.0.0adds a class to <body>, modal-open, when the modal first shows. This class adds margin-right: 15pxto the body to account for a scrollbar, which is there on longer pages. This is great, except for shorter pages when a scrollbar isn't on the body. In the no scrollbar case, the margin-right causes the body to shift left on modal open.

我只是遇到了同样的问题。当模态首次显示时,Bootstrap 3.0.0似乎向<body>, 中添加了一个类modal-open。此类添加margin-right: 15px到正文以说明滚动条,该滚动条位于较长的页面上。这很好,除了当滚动条不在主体上时较短的页面。在没有滚动条的情况下,margin-right 会导致主体在模态打开时向左移动。

I was able to solve this by adding some short Javascript and a little CSS:

我能够通过添加一些简短的 Javascript 和一些 CSS 来解决这个问题:

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:

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

These combined permit the margin-right scrollbar fix to work for long pages, yet is disabled for shorter pages (when document height <= window height). I hope this helps!

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



Bootstrap 3.0.1+ (tested up to 3.1.1) is a different story. Try the following:

Bootstrap 3.0.1+(测试到 3.1.1)是另一回事。请尝试以下操作:

CSS:

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:

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:

编辑

In light of Mac eliminating scrollbars from inhabiting window render width, here's a more portable solution (3.0.1+) if you don't mind some feature detection. Reference: http://davidwalsh.name/detect-scrollbar-width

鉴于 Mac 从居住窗口渲染宽度中消除了滚动条,如果您不介意某些功能检测,这里有一个更便携的解决方案 (3.0.1+)。参考:http: //davidwalsh.name/detect-scrollbar-width

CSS:

CSS:

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

JS:

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

回答by obiwahn

For me only the combination of two answers worked.

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

css:

css:

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

body.modal-open {
    overflow: auto;
}

stylus:

手写笔:

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

回答by KrondaliX

Mine is easy there it is (CSS Only):

我的很简单(仅限 CSS):

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

The fact is the !important is overlapping bootstrap from changing padding and margin with the modal-open class and styles.

事实是 !important 是通过使用 modal-open 类和样式更改填充和边距来重叠引导程序。

回答by Dinesh Kanivu

Try this

尝试这个

body.modal-open {
overflow: auto;
}

回答by Marius Stefanescu

I had the same issue with the scroll bar disappearing, and the body shifting to the left when opening a bootstrap modal.

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

I've found out an easy fix:

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

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

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

Good luck to all!

祝你们好运!

回答by SERG

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

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

回答by Scott Murphy

I added this to my CSS and seemed to work when adding a 'fixed' overlay to view

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

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

回答by Rahul Gupta

Try this simple javascript:

试试这个简单的javascript:

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

回答by Rahul Gupta

You should try this. this is working fine.

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

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

回答by Carlo Bos

The following inclusion to my .css file fixed my centered content page from moving or resizing when the popup modal shows.

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

I did not need any Javascript, just the css code below. This fixed it for content with or without a vertical or horizontal scrollbar.

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

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

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

I'm using bootstrap 3.3.7.

我正在使用引导程序 3.3.7。