移动设备上的Twitter Bootstrap模式
引导模式在Android和iOS上不能正常工作。问题跟踪器承认存在问题，但没有提供有效的解决方案：
Modals in 2.0 are broken on mobile.
Modal window in 2.0 not positioning properly
屏幕变暗，但模式本身在视口中不可见。可以在页面顶部找到它。当您在页面上向下滚动时，就会出现问题。
以下是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;
}有什么我可以申请的修复方法吗？
回答 7
Stack Overflow用户
发布于 2012-05-10 01:09:01
当Bootstrap模式对话框打开时，我们使用此代码将其居中。我在iOS上使用它时没有遇到任何问题，但我不确定它是否适用于安卓系统。
$('.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;
});Stack Overflow用户
发布于 2015-05-07 17:04:53
诚然，我没有尝试过上面列出的任何解决方案，但当我在Bootstrap 3中尝试jschr's Bootstrap-modal project (链接到顶部答案中)时，我(最终)高兴得跳了起来。js给我带来了麻烦，所以我放弃了它(也许我的是一个独特的问题，或者它在Bootstrap 2上运行得很好)，但CSS文件本身似乎可以在Android的本地2.3.4浏览器中做到这一点。
在我的例子中，到目前为止，我已经求助于在使用覆盖之前使用(次优的)用户代理检测，以允许现代手机中的预期行为。
例如，如果你希望所有的Android手机版本3.x和更低版本只使用全套的hack，你可以在使用javascript检测到用户代理之后，在主体中添加一个"oldPhoneModalNeeded“类，然后修改jschr的Bootstrap- body CSS属性，使其始终将.oldPhoneModalNeeded作为祖先。
Stack Overflow用户
发布于 2015-08-27 01:49:33
您可以在javascript中全局添加此属性：
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);
}https://stackoverflow.com/questions/10437151
复制相似问题