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

Bootstrap modals don't work correctly on Android and iOS. The issue tracker acknowledges the problem but does not offer a working solution:

引导模式在Android和iOS上不能正常工作。问题跟踪器承认问题，但不提供有效的解决方案:

Modals in 2.0 are broken on mobile.

2.0版的Modals在移动设备上被破坏了。

Modal window in 2.0 not positioning properly

模态窗口在2.0中定位不正确

The screen darkens but the modal itself is not visible in the viewport. It's possible to find it at the top of the page. The problem occurs when you've scrolled down on the page.

屏幕变暗，但模式本身在viewport中不可见。有可能在这一页的顶部找到它。当你在页面上滚动时，问题就出现了。

Here is a relevant portion of bootstrap-responsive.css:

下面是bootstrap- response的相关部分。

.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;
}

Is there a fix I can apply?

有什么办法我可以申请吗?

11 个解决方案

#1

EDIT: An unofficial Bootstrap Modal modification has been built to address responsive/mobile issues. This is perhaps the simplest and easiest way to remedy the problem.

编辑:一个非官方的引导模式修改已经被建立来解决响应/移动问题。这可能是解决问题的最简单、最简单的方法。

There has since been a fix found in one of the issues you discussed earlier

从那以后，您在前面讨论的一个问题中找到了解决方案

in bootstrap-responsive.css

在bootstrap-responsive.css

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

and in bootstrap.css

而在bootstrap.css

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

#2

Gil's answer holds promise (the library he linked to) --- but for the time being, it still doesn't work when scrolled down on the mobile device.

Gil的回答是有希望的(他连接到的图书馆)--- -但是暂时，当它在移动设备上滚动的时候仍然不能工作。

I solved the issue for myself using just a snippet of CSS at the end of my CSS files:

我用CSS文件结尾的一个CSS片段自己解决了这个问题:

@media (max-width: 767px) {
  #content .modal.fade.in {
    top: 5%;
  }
}

The #content selector is simply an id that wraps my html so I can override Bootstrap's specificity (set to your own id wrapping your modal html).

#content selector只是包装我的html的id，因此我可以覆盖Bootstrap的特殊性(设置为您自己的id包装您的模态html)。

The downside: It's not centered vertically on the mobile devices.

缺点:它不是垂直地集中在移动设备上。

The upside: It's visible, and on smaller devices, a reasonably sized modal will take up much of the screen, so the "non-centering" won't be as apparent.

好处:它是可见的，在较小的设备上，一个合理大小的模式将占据屏幕的大部分，因此“非中心”将不会那么明显。

Why it works:

When you're at low screen sizes with Bootstrap's responsive CSS, for devices with smaller screens, it sets .modal.fade.in's 'top' to 'auto'. For some reason the mobile webkit browsers seem to have a hard time with figuring out the vertical placement with the "auto" assignment. So just switch it back to a fixed value and it works great.

当你使用Bootstrap的响应性CSS在低屏幕大小时，对于屏幕较小的设备，它会设置.modal.fade。在“汽车”的“高级”。由于某些原因，移动webkit浏览器似乎很难找到“自动”分配的垂直位置。所以只要把它转换回一个固定的值就可以了。

Since the modal is already set to postition: absolute, the value is relative to the viewport's height, not the document height, so it works no matter how long the page is or where you're scrolled to.

由于模式已经被设置为postition: absolute，所以值相对于viewport的高度，而不是文档的高度，所以不管页面有多长，也不管您在哪里滚动，它都可以工作。

#3

The solution by niftylettuce in issue 2130 seems to fix modals in all mobile platforms...

第2130期的nifty生菜解决方案似乎修复了所有移动平台的modals……

9/1/12 UPDATE: The fix has been updated here: twitter bootstrap jquery plugins

9/1/12更新:修改已经在这里更新:twitter启动jquery插件

(the code below is older but still works)

(下面的代码比较老，但仍然有效)

// # 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);

#4

We use this code to center the Bootstrap modal dialogs when they open. I haven't had any issue with them on iOS while using this but I'm not sure if it will work for Android.

我们使用此代码在打开引导模式对话框时将它们居中。我在使用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;
});

#5

Admittedly, I haven't tried any of the solutions listed above but I was (eventually) jumping for joy when I tried jschr's Bootstrap-modal project in Bootstrap 3 (linked to in the top answer). The js was giving me trouble so I abandoned it (maybe mine was a unique issue or it works fine for Bootstrap 2) but the CSS files on their own seem to do the trick in Android's native 2.3.4 browser.

无可否认，我没有尝试过上面列出的任何解决方案，但当我尝试jschr的Bootstrap-modal项目时，我(最终)高兴地跳了起来(链接到上面的答案)。js给我带来了麻烦，所以我放弃了它(也许我的问题是唯一的问题，或者它对Bootstrap 2很好用)，但CSS文件本身似乎在Android的原生2.3.4浏览器中起了作用。

In my case, I've resorted so far to using (sub-optimal) user-agent detection before using the overrides to allow expected behaviour in modern phones.

在我的例子中，我使用了到目前为止使用的(次优)用户代理检测，然后使用overrides来允许在现代电话中使用预期的行为。

For example, if you wanted all Android phones ver 3.x and below only to use the full set of hacks you could add a class "oldPhoneModalNeeded" to the body after user agent detection using javascript and then modify jschr's Bootstrap-modal CSS properties to always have .oldPhoneModalNeeded as an ancestor.

例如，如果你想要所有的Android手机。在使用javascript进行用户代理检测后，为了使用完整的hack集，您可以向主体添加一个类“oldphonemodalneeds”，然后修改jschr的Bootstrap-modal CSS属性，使其始终具有. oldphonemodalrequired作为祖先。

#6

you can add this property globally in javascript:

您可以在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);
 }

#7

OK this does fix it I tried it today Sept 5-2012 but you have to be sure to check out the demo

好的，这确实修复了它我今天9月5-2012试过了，但是你一定要看看演示

The solution by niftylettuce in issue 2130 seems to fix modals in all mobile platforms...

第2130期的nifty生菜解决方案似乎修复了所有移动平台的modals……

9/1/12 UPDATE: The fix has been updated here: twitter bootstrap jquery plugins

9/1/12更新:修改已经在这里更新:twitter启动jquery插件

here is the link to the Demo It works great heres the code I used

这里是演示的链接，这是我使用的代码。

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

#8

My solution...

我的解决方案…

Ver en jsfiddle

版本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');
}

#9

Found a very hacky solution to this problem, but it works. I added a class to the link that is used to open the modal (With the data-target), then using Jquery, added a click event to that class that gets the data-target, finds the modal it is supposed to open, and then opens it via Javascript. Works just fine for me. I also added a mobile check on mine so that it only runs on mobile, but that's not required.

为这个问题找到了一个非常简单的解决方案，但它确实有效。我向用于打开模态(与数据目标)的链接添加了一个类，然后使用Jquery，向获取数据目标的类添加一个单击事件，找到它应该打开的模态，然后通过Javascript打开它。对我来说还行。我还在我的手机上添加了一个移动检查功能，以便它只在移动设备上运行，但这不是必需的。

$('.forceOpen').click(function() {
  var id = $(this).attr('data-target');
  $('.modal').modal('hide');
  $(id).modal('show');
});

#10

Mainly Nexus 7 modal issue , modal was going down the screen

主要是Nexus 7的模态问题，模态出现在屏幕上

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

#11

For me just $('[data-toggle="modal"]').click(function(){}); is working fine.

对我来说只是$(“[data-toggle =“模态”]”).click(函数(){ });工作正常。