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

发布时间：2020-12-18 00:16:48 所属栏目：安全来源：网络整理

导读：我目前在手机上使用twitter bootstrap 3模态.它在桌面上工作得很好,但是在移动时,只要滚动它也会滚动窗口后面的模态.如何防止这种情况发生？解决方法 FOR BOOTSTRAP 3 我发现这个问题的修复似乎对我的网站来说足够好. CSS： body.modal-open .wrap { overfl

我目前在手机上使用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;
  }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!