移动设备上的Twitter Bootstrap模式
引导模式在Android和iOS上无法正常工作。 问题跟踪器确认问题，但不提供工作解决scheme：
2.0中的模态在移动时被打破。
2.0中的模式窗口没有正确定位
屏幕变暗，但模式本身在视口中不可见。 可以在页面顶部find它。 当您在页面上向下滚动时，会出现问题。
以下是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; } 我可以申请修理吗？
编辑：一个非官方的Bootstrap模态修改已经build立，以解决响应/移动问题。 这也许是解决问题最简单，最简单的方法。
之前已经讨论过的其中一个问题已经find了解决办法
在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; }
吉尔的答案是有承诺的（他所链接的图书馆）—但是暂时还是在移动设备上滚动下来时仍然不起作用。
我在CSS文件的末尾使用了一小段CSS解决了这个问题：
@media (max-width: 767px) { #content .modal.fade.in { top: 5%; } }
#contentselect器只是一个包装我的html的id，所以我可以覆盖Bootstrap的特异性（设置为你自己的ID包装你的模态HTML）。
缺点是：它不是垂直居中在移动设备上。
好处：这是可见的，在较小的设备上，合理大小的模式将占据大部分屏幕，所以“不居中”将不那么明显。
为什么它的作品：
当Bootstrap的响应式CSS处于低屏幕尺寸时，对于屏幕较小的设备，它会将.modal.fade.in的“top”设置为“auto”。 出于某种原因，移动webkit浏览器似乎很难用“自动”分配来计算垂直位置。 所以把它切换回一个固定的值，它工作的很好。
由于模式已经设置为邮政：绝对值，该值是相对于视口的高度，而不是文档高度，所以无论多久页面或滚动到哪里工作。
niftylettuce在2130期 的解决scheme似乎可以解决所有移动平台的模块问题。
9/1/12更新 ：修复已更新在这里： twitter引导jquery插件
（下面的代码是较旧的，但仍然有效）
// # 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; });
无可否认，我没有尝试过上面列出的任何解决scheme，但是当我尝试了Bootstrap 3中的jschr的Bootstrap-modal项目 （链接到顶部的答案）时，我终于跳了起来。 js给了我麻烦，所以我放弃了它（也许我的是一个独特的问题，或者它适用于Bootstrap 2），但是CSS本身的文件似乎在Android 2.3.4本机浏览器中诀窍。
在我的情况下，我已经采取了迄今为止使用（次优）用户代理检测之前使用覆盖，以允许在现代手机预期的行为。
例如，如果您希望所有Android手机版本3.x及以下版本只使用全套黑客，则可以在使用javascript进行用户代理检测之后向主体中添加类“oldPhoneModalNeeded”，然后将jschr的Bootstrap-modal CSS属性修改为总是有.oldPhoneModal作为一个祖先。
您可以在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日尝试，但你必须确保看看演示
niftylettuce在2130期的解决scheme似乎可以解决所有移动平台的模块问题。
9/1/12更新：修复已更新在这里： twitter引导jquery插件
这里是演示的链接它的作品非常好，我使用的代码
title_dialog.modal(); title_dialog.modalResponsiveFix({}) title_dialog.touchScroll();
我的解决scheme
Ver en jsfiddle
//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的解决scheme，但它的工作原理。 我添加了一个类的链接，用于打开模式（与数据目标），然后使用Jquery，添加一个单击事件，该类获取数据目标，find它应该打开的模式，和然后通过Javascript打开它。 为我工作得很好。 我还在我的手机上添加了一个移动支票，以便它只能在手机上运行，但这不是必需的。
$('.forceOpen').click(function() { var id = $(this).attr('data-target'); $('.modal').modal('hide'); $(id).modal('show'); });
主要是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(){}); 工作正常。
