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;
}
我可以申请修复吗？
编辑：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;
}
主要是Nexus 7模态问题，模态在屏幕下方
.modal:before {
content: '';
display: inline-block;
height: 50%; (the value was 100% for center the modal)
vertical-align: middle;
margin-right: -4px;
}
对我来说，只是$('[data-toggle="modal"]').click(function(){});工作正常。
虽然这个问题已经很老了，但是在寻找解决方案以改善手机上模态的用户体验时，有些人仍然会偶然发现它。
我做了一个lib来改善Bootrsrap模态在手机上的行为。
Bootstrap 3：https://github.com/keaukraine/bootstrap-fs-modal
Bootstrap 4：https://github.com/keaukraine/bootstrap4-fs-modal
吉尔的回答是有希望的（他链接到的图书馆）---但目前，在移动设备上向下滚动时仍然无效。
我在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浏览器似乎很难通过“自动”分配来确定垂直位置。所以只需将其切换回固定值即可。
由于模态已设置为position：absolute，因此该值相对于视口高度而非文档高度，因此无论页面有多长或滚动到何处，它都可以工作。
The solution by niftylettuce中的issue 2130似乎在所有移动平台上修复模态......
9/1/12更新：此修复程序已更新：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);
我们使用此代码在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;
});
不可否认，我没有尝试过上面列出的任何解决方案，但是当我在Bootstrap 3中尝试使用jschr's Bootstrap-modal project（链接到最佳答案）时，我（最终）欢呼雀跃。 js给了我麻烦所以我放弃了它（可能我的是一个独特的问题，或者它适用于Bootstrap 2）但是他们自己的CSS文件似乎在Android的原生2.3.4浏览器中起作用。
就我而言，在使用覆盖之前，我已经使用（次优）用户代理检测，以允许现代手机中的预期行为。
例如，如果您希望所有Android手机版本3.x及以下版本仅使用全套黑客，您可以在使用javascript检测用户代理后向主体添加“oldPhoneModalNeeded”类，然后将jschr的Bootstrap-modal CSS属性修改为总是有.oldPhoneModalNeeded作为祖先。
您可以在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);
}
好的，这确实解决了我今天9月5日到2012年尝试过，但你必须确保查看演示
问题2130中niftylettuce的解决方案似乎在所有移动平台中修复模态...
9/1/12更新：此修复程序已更新：twitter bootstrap jquery plugins
这里是Demo的链接它使用了我使用的代码
title_dialog.modal();
title_dialog.modalResponsiveFix({})
title_dialog.touchScroll();
我的解决方案
//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');
}
找到了一个非常hacky解决这个问题，但它的工作原理。我在用于打开模态的链接中添加了一个类（使用数据目标），然后使用Jquery，向该类添加了一个click事件，该类获取数据目标，找到它应该打开的模态，以及然后通过Javascript打开它。对我来说工作得很好。我还在我的手机上添加了一个移动支票，以便它只能在移动设备上运行，但这不是必需的。
$('.forceOpen').click(function() {
var id = $(this).attr('data-target');
$('.modal').modal('hide');
$(id).modal('show');
});