移动设备上的Twitter Bootstrap模式

时间：2012-05-03 18:18:19

标签： android ios mobile webkit twitter-bootstrap

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

我可以申请修复吗？

11 个答案:

答案 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)

The solution by niftylettuce中的{p> issue 2130似乎可以修复所有移动平台中的模态......

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)

我的解决方案......

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

答案 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模态在手机上的行为。

引导程序3 ：https://github.com/keaukraine/bootstrap-fs-modal

引导程序4 ：https://github.com/keaukraine/bootstrap4-fs-modal

相关问题
最新问题