移动设备上的Twitter Bootstrap模式

Question

Bootstrap模式在Android和iOS上无法正常运行.问题跟踪器确认问题但未提供可行的解决方案:

2.0中的模态在移动设备上被破坏.

2.0中的模态窗口未正确定位

屏幕变暗但模式本身在视口中不可见.可以在页面顶部找到它.当您向下滚动页面时会发生此问题.

以下是bootstrap-responsive.css的相关部分:

.modal {
    position:fixed;
    top:50%;
    left:50%;
    z-index:1050;
    max-height:500px;
    overflow:auto;
    width:560px;
    background-color:#fff;
    border:1px solid #999;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow:0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding-box;
    background-clip:padding-box;
    margin:-250px 0 0 -280px;
}

我可以申请修复吗？

Answer 1

编辑:已经构建了一个非官方的Bootstrap Modal修改来解决响应/移动问题.这可能是解决问题的最简单,最简单的方法.

从那以后,你在前面讨论的一个问题中发现了修复

在 bootstrap-responsive.css

.modal { 
    position: fixed; 
    top: 3%; 
    right: 3%; 
    left: 3%; 
    width: auto; 
    margin: 0; 
}
.modal-body { 
    height: 60%; 
}

并在 bootstrap.css

.modal-body { 
    max-height: 350px; 
    padding: 15px; 
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch; 
 }

Answer 2

吉尔的回答是有希望的(他链接到的图书馆)---但目前,在移动设备上向下滚动时它仍然不起作用.

我在CSS文件末尾只使用了一小段CSS解决了这个问题:

@media (max-width: 767px) {
  #content .modal.fade.in {
    top: 5%;
  }
}

的#content选择很简单,就是围绕我的HTML,所以我可以重写引导的特异性(设置为您自己的ID包裹你的HTML模式)的ID.

缺点:它不是垂直居中的移动设备.

好处:它是可见的,而在较小的设备上,一个合理大小的模态将占据屏幕的大部分,因此"非居中"将不会那么明显.

为什么会这样:

当您使用Bootstrap的响应式CSS时屏幕尺寸较小时,对于屏幕较小的设备,它会将.modal.fade.in的"top"设置为"auto".出于某种原因,移动webkit浏览器似乎很难通过"自动"分配来确定垂直位置.所以只需将其切换回固定值即可.

由于模态已经设置为postition:absolute,因此该值相对于视口的高度而不是文档高度,因此无论页面有多长或滚动到哪里,它都可以工作.