Android 移动设备上的Twitter引导模式

引导模式在Android和iOS上无法正常工作。问题追踪者承认问题，但不提供有效的解决方案：

屏幕变暗，但模式本身在视口中不可见。可以在页面顶部找到它。当您向下滚动页面时，就会出现问题

以下是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;
}

---

是否有可以应用的修复方法？

我们使用此代码在引导模式对话框打开时将其居中。我在iOS上使用它时没有遇到任何问题，但我不确定它是否适用于Android

$('.modal').on('show', function(e) {
    var modal = $(this);
    modal.css('margin-top', (modal.outerHeight() / 2) * -1)
         .css('margin-left', (modal.outerWidth() / 2) * -1);
    return this;
});

编辑：已建立了一个解决响应/移动问题的解决方案。这也许是解决问题最简单、最简单的方法。

从那以后，在中发现了一个修复程序

在

bootstrap responsive.css中

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

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

在
bootstrap.css中

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

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

在中，似乎可以修复所有移动平台中的模态

2012年9月1日更新：修复程序已在此处更新：

（下面的代码较旧，但仍然有效）

/#Twitter引导模式响应修复程序@niftylettuce
//*决议#407、#1017、#1339、#2130、#3361、#3362、#4283
//   
//*内置支持全屏引导图像库
//    
//**注意：**如果您使用的是.modal全屏，则需要
//要将以下CSS添加到“bootstrap image gallery.CSS”，请执行以下操作：
//
//@media（最大宽度：480px）{
//.模态全屏{
//左：0！重要；
//右：0！重要；
//页边距顶部：0！重要；
//左边距：0！重要；
//    }
//  }
//
var adjustModal=功能（$modal）{
var-top；
如果（$（窗口）.width（）=$（窗口）.height（））{
top=$（窗口）；
}否则{
top=$（窗口）.scrollTop（）+（$（窗口）.height（）-$modal.height（））/2；
}
}else if（$modal.height（）>=$（window.height（）-10）{
顶部=$（窗口）。滚动顶部（）+10；
}否则{
top=$（窗口）.scrollTop（）+（$（窗口）.height（）-$modal.height（））/2；
}
}否则{
top=‘50%’；
if（$modal.hasClass（'modal-fullscreen'））{
$modal.stop（）.animate({
marginTop:-（$modal.outerHeight（）/2）
，marginLeft:-（$modal.outerWidth（）/2）
，top:top
}“快”）；
返回；
}
}
$modal.stop（）.animate（{'top'：top}，“fast”）；
};
var show=function（）{
var$modal=$（本）；
调整模式（$模式）；
};
var checkShow=函数（）{
$（'.modal'）。每个（函数（）{
var$modal=$（本）；
if（$modal.css（'display'）！=='block'）返回；
调整模式（$模式）；
});
};
var modalWindowResize=函数（）{
$（'.modal'）。不是（'.modal gallery'）。在（'show'，show'）；
$（'modal gallery'）。在（'displated'，show'）；
checkShow（）；
};
$（modalWindowResize）；
$（窗口）。调整大小（modalWindowResize）；
$（窗口）。滚动（选中显示）；
Gil的答案有希望（他链接到的库）---但目前，当在移动设备上向下滚动时，它仍然不起作用

我自己解决了这个问题，只使用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浏览器似乎很难通过“自动”分配来确定垂直位置。所以只要把它切换回一个固定值，它就工作得很好

由于模式已设置为position:absolute，因此该值与视口的高度有关，而不是与文档高度有关，因此无论页面有多长或滚动到何处，该模式都有效。
好的，这确实解决了问题。我今天于2012年9月5日尝试了该模式，但您必须确保查看演示

niftylettuce在第2130期中的解决方案似乎修复了所有模态
移动平台

2012年9月1日更新：修复程序已在此处更新：

这里是链接到
它工作得很好这是我使用的代码

            title_dialog.modal();
            title_dialog.modalResponsiveFix({})
            title_dialog.touchScroll();

我的解决方案


//修复模式移动Boostrap 3
功能显示（id）{
//修正CSS
$（“.modal footer”）.css（{“padding”：“19px 20px 20px”，“边距顶部”：“15px”，“文本对齐”：“right”，“border top”：“1px solid#e5”}）；
$（“.modal body”）.css（“overflow-y”、“auto”）；
//固定。模态体高
$（'#'+id）.on（'show.bs.modal'，function（）{
$（“#“+id+”>.modal对话框>.modal内容>.modal正文”）.css（“高度”、“自动”）；
h1=$（“#”+id+“>.modal对话框”）.height（）；
h2=$（窗口）.height（）；
h3=$（“#“+id+”>.modal对话框>.modal内容>.modal正文”）.height（）；
h4=h2-（h1-h3）；
如果（$（窗口）.width（）>=768）{
如果（h1>h2）{
$（“#“+id+”>.modal对话框>.modal内容>.modal正文”）。高度（h4）；
}
$（“#”+id+“>.modal dialog”）.css（“margin”，“30px auto”）；
$（“#“+id+”>.modal对话框>.modal内容”）.css（“边框”，“1px实心rgba（0,0,0,0.2）”；
$（“#“+id+”>.modal对话框>.modal内容”）.css（“边框半径”，6）；
如果（$（“#”+id+“>.model对话框”）.height（）+30>h2）{
$（“#”+id+“>.modal dialog”）.css（“页边距顶部”、“0px”）；
$（“#”+id+“>.modal dialog”）.css（“边距底部”，“0px”）；
}
}
否则{
//修复手机的全屏显示
$（“#“+id+”>.modal对话框>.modal内容>.modal正文”）。高度（h4）；
$（“#”+id+“>.modal dialog”）.css（“margin”，0）；
$（“#“+id+”>.modal对话框>.modal内容”）.css（“bord
$('.forceOpen').click(function() {
  var id = $(this).attr('data-target');
  $('.modal').modal('hide');
  $(id).modal('show');
});

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {
    var styleEl = document.createElement('style'), styleSheet;
    document.head.appendChild(styleEl);
    styleSheet = styleEl.sheet;
    styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
 }

  .modal:before {
    content: '';
    display: inline-block;
    height: 50%; (the value was 100% for center the modal)
    vertical-align: middle;
    margin-right: -4px;
  }