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;
}
我可以申请修复吗？
答案 0 :(得分：61)
编辑：已构建unofficial Bootstrap Modal modification来解决响应/移动问题。这可能是解决问题的最简单，最简单的方法。
此后在one of the issues you discussed earlier
中找到了修复程序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;
}
答案 1 :(得分：14)
吉尔的回答是有希望的（他链接到的图书馆）---但目前，在移动设备上向下滚动时仍然无效。
我在CSS文件末尾只使用了一小段CSS解决了这个问题：
@media (max-width: 767px) {
#content .modal.fade.in {
top: 5%;
}
}
#content选择器只是一个包装我的html的id，所以我可以覆盖Bootstrap的特异性（设置为你自己的id包装模态html）。
缺点：它没有垂直居中于移动设备上。
好处：它是可见的，在较小的设备上，合理大小的模式将占据屏幕的大部分，因此“非居中”将不会那么明显。
当您使用Bootstrap的响应式CSS时屏幕尺寸较小时，对于屏幕较小的设备，它会将 .modal.fade.in 的“top”设置为“auto”。出于某种原因，移动webkit浏览器似乎很难通过“自动”分配来确定垂直位置。所以只需将其切换回固定值即可。
由于模态已设置为postition：absolute，因此该值相对于视口的高度而不是文档高度，因此无论页面有多长或滚动到何处，它都可以正常工作。
答案 2 :(得分：4)
9/1/12 UPDATE ：此修复程序已更新：twitter bootstrap jquery plugins
（以下代码较旧但仍有效）
// # Twitter Bootstrap modal responsive fix by @niftylettuce
// * resolves #407, #1017, #1339, #2130, #3361, #3362, #4283
// <https://github.com/twitter/bootstrap/issues/2130>
// * built-in support for fullscreen Bootstrap Image Gallery
// <https://github.com/blueimp/Bootstrap-Image-Gallery>
// **NOTE:** If you are using .modal-fullscreen, you will need
// to add the following CSS to `bootstrap-image-gallery.css`:
//
// @media (max-width: 480px) {
// .modal-fullscreen {
// left: 0 !important;
// right: 0 !important;
// margin-top: 0 !important;
// margin-left: 0 !important;
// }
// }
//
var adjustModal = function($modal) {
var top;
if ($(window).width() <= 480) {
if ($modal.hasClass('modal-fullscreen')) {
if ($modal.height() >= $(window).height()) {
top = $(window).scrollTop();
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else if ($modal.height() >= $(window).height() - 10) {
top = $(window).scrollTop() + 10;
} else {
top = $(window).scrollTop() + ($(window).height() - $modal.height()) / 2;
}
} else {
top = '50%';
if ($modal.hasClass('modal-fullscreen')) {
$modal.stop().animate({
marginTop : -($modal.outerHeight() / 2)
, marginLeft : -($modal.outerWidth() / 2)
, top : top
}, "fast");
return;
}
}
$modal.stop().animate({ 'top': top }, "fast");
};
var show = function() {
var $modal = $(this);
adjustModal($modal);
};
var checkShow = function() {
$('.modal').each(function() {
var $modal = $(this);
if ($modal.css('display') !== 'block') return;
adjustModal($modal);
});
};
var modalWindowResize = function() {
$('.modal').not('.modal-gallery').on('show', show);
$('.modal-gallery').on('displayed', show);
checkShow();
};
$(modalWindowResize);
$(window).resize(modalWindowResize);
$(window).scroll(checkShow);
答案 3 :(得分：2)
我们使用此代码将Bootstrap模式对话框打开时居中。我在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;
});
答案 4 :(得分：1)
不可否认，我还没有尝试过上面列出的任何解决方案，但是当我在Bootstrap 3中尝试jschr's Bootstrap-modal project（链接到最顶层的答案）时，我（最终）欢呼雀跃。 js给了我麻烦，所以我放弃了它（也许我的是一个独特的问题，或者它适用于Bootstrap 2）但是CSS文件本身似乎在Android的原生2.3.4浏览器中做到了。< / p>
就我而言，到目前为止，我已经使用（次优）用户代理检测，然后才使用覆盖来允许现代手机中的预期行为。
例如，如果您希望所有Android手机版本3.x及以下版本只使用全套黑客，您可以添加一个类＆＃34; oldPhoneModalNeeded＆＃34;用户代理检测后使用javascript然后修改jschr的Bootstrap-modal CSS属性，始终将.oldPhoneModalNeeded作为祖先。
答案 5 :(得分：0)
好的，这确实解决了我今天在2012年9月5日尝试了但你必须确保查看演示
niftylettuce在问题2130中的解决方案似乎总是修复模态 移动平台......
9/1/12更新：修复程序已在此处更新： twitter bootstrap jquery plugins
这是指向Demo的链接 它使用了我使用的代码
title_dialog.modal();
title_dialog.modalResponsiveFix({})
title_dialog.touchScroll();
答案 6 :(得分：0)
我的解决方案......
//Fix modal mobile Boostrap 3
function Show(id){
//Fix CSS
$(".modal-footer").css({"padding":"19px 20px 20px","margin-top":"15px","text-align":"right","border-top":"1px solid #e5e5e5"});
$(".modal-body").css("overflow-y","auto");
//Fix .modal-body height
$('#'+id).on('shown.bs.modal',function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
//Aply changes on screen resize (example: mobile orientation)
window.onresize=function(){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").css("height","auto");
h1=$("#"+id+">.modal-dialog").height();
h2=$(window).height();
h3=$("#"+id+">.modal-dialog>.modal-content>.modal-body").height();
h4=h2-(h1-h3);
if($(window).width()>=768){
if(h1>h2){
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
}
$("#"+id+">.modal-dialog").css("margin","30px auto");
$("#"+id+">.modal-dialog>.modal-content").css("border","1px solid rgba(0,0,0,0.2)");
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",6);
if($("#"+id+">.modal-dialog").height()+30>h2){
$("#"+id+">.modal-dialog").css("margin-top","0px");
$("#"+id+">.modal-dialog").css("margin-bottom","0px");
}
}
else{
//Fix full-screen in mobiles
$("#"+id+">.modal-dialog>.modal-content>.modal-body").height(h4);
$("#"+id+">.modal-dialog").css("margin",0);
$("#"+id+">.modal-dialog>.modal-content").css("border",0);
$("#"+id+">.modal-dialog>.modal-content").css("border-radius",0);
}
};
});
//Free event listener
$('#'+id).on('hide.bs.modal',function(){
window.onresize=function(){};
});
//Mobile haven't scrollbar, so this is touch event scrollbar implementation
var y1=0;
var y2=0;
var div=$("#"+id+">.modal-dialog>.modal-content>.modal-body")[0];
div.addEventListener("touchstart",function(event){
y1=event.touches[0].clientY;
});
div.addEventListener("touchmove",function(event){
event.preventDefault();
y2=event.touches[0].clientY;
var limite=div.scrollHeight-div.clientHeight;
var diff=div.scrollTop+y1-y2;
if(diff<0)diff=0;
if(diff>limite)diff=limite;
div.scrollTop=diff;
y1=y2;
});
//Fix position modal, scroll to top.
$('html, body').scrollTop(0);
//Show
$("#"+id).modal('show');
}
答案 7 :(得分：0)
找到了一个非常hacky解决这个问题的方法，但它确实有效。 我在用于打开模态的链接中添加了一个类（使用数据目标），然后使用Jquery，向该类添加了一个click事件，该类获取数据目标，找到它应该打开的模态，以及然后通过Javascript打开它。对我来说工作得很好。我还在我的网站上添加了一个移动支票，以便它只能在移动设备上运行，但这并不是必需的。
$('.forceOpen').click(function() {
var id = $(this).attr('data-target');
$('.modal').modal('hide');
$(id).modal('show');
});
答案 8 :(得分：0)
主要是Nexus 7模态问题，模态在屏幕下方
.modal:before {
content: '';
display: inline-block;
height: 50%; (the value was 100% for center the modal)
vertical-align: middle;
margin-right: -4px;
}
答案 9 :(得分：0)
对我来说，$('[data-toggle="modal"]').click(function(){});工作正常。
答案 10 :(得分：0)
尽管这个问题已经很久了，但在寻找改善手机模态用户体验的解决方案时，仍然有人会偶然发现它。
我已经建立了一个库来改善Bootrsrap模态在手机上的行为。