twitter-bootstrap – twitter bootstrap 3模态移动滚动问题

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – twitter bootstrap 3模态移动滚动问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前在手机上使用twitter bootstrap 3模态.它在桌面上工作得很好,但是在移动时,只要滚动它也会滚动窗口后面的模态.如何防止这种情况发生?

解决方法

FOR BOOTSTRAP 3

我发现这个问题的修复似乎对我的网站来说足够好.

CSS:

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content,.modal-dialog,.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

所以在模态是打开的情况下,所有的非模态内容都限制在视口的高度,而且溢出被隐藏,这样就阻止了主站点被滚动,同时模态仍然可以被滚动.

编辑:这个修复在Firefox中有一些问题.

修复我的网站是(FF只媒体查询):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}
原文链接:https://www.f2er.com/bootstrap/234091.html

猜你在找的Bootstrap相关文章