Вопрос по ios, twitter-bootstrap, mobile, android – Twitter Bootstrap модальный на мобильных устройствах

65

Модальные бутстрэпы не работают корректно на Android и iOS. Система отслеживания проблем признает проблему, но не предлагает рабочего решения:

Модалы в 2.0 не работают на мобильном телефоне.

Модальное окно в 2.0 не позиционируется должным образом

Экран темнеет, но сам модал не виден в области просмотра. Его можно найти в верхней части страницы. Проблема возникает, когда вы прокручиваете страницу вниз.

Вот соответствующая часть bootstrap-responseive.css:

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

Могу ли я применить исправление?

Ваш Ответ

12   ответов
0

$('[data-toggle="modal"]').click(function(){}); работает нормально.

1

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

некоторые люди все еще могут наткнуться на него, когда ищут решение для улучшения UX модалов на мобильных телефонах.

Я приложил много усилий для улучшения модов Bootrsrap. поведение на телефонах.

Bootstrap 3: https://github.com/keaukraine/bootstrap-fs-modal

Bootstrap 4: https://github.com/keaukraine/bootstrap4-fs-modal

0

Я добавил класс в ссылку, которая используется для открытия модального объекта (с помощью цели данных), затем с помощью Jquery добавил событие щелчка в этот класс, который получает цель данных, находит модал, который он должен открыть, и затем открывает его через Javascript. Работает просто отлично для меня. Я также добавил мобильный чек, чтобы он работал только на мобильном телефоне, но это не требуется.

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

это все исправляет, я пробовал сегодня 5 сентября, но вы должны быть уверены, чтобы проверить демо

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

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

вот ссылка надемонстрация Это прекрасно работает, вот код, который я использовал

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

что я не пробовал ни одного из перечисленных выше решений, но (в конце концов) прыгал от радости, когда пыталсяBootstrap-модальный проект jschr в Bootstrap 3 (ссылка указана в верхнем ответе). Js доставлял мне неприятности, поэтому я отказался от него (возможно, у меня была уникальная проблема или он отлично работает для Bootstrap 2), но сами CSS-файлы, похоже, добились цели в родном браузере Android 2.3.4.

В моем случае я до сих пор прибегал к использованию (неоптимального) определения пользовательского агента перед использованием переопределений, чтобы обеспечить ожидаемое поведение в современных телефонах.

Например, если вы хотите, чтобы на всех телефонах Android версии 3.x и ниже использовался только полный набор хаков, вы можете добавить класс & quot; oldPhoneModalNeeded & quot; к телу после обнаружения пользовательского агента с использованием javascript, а затем измените свойства CSS начальной загрузки jschr, чтобы всегда иметь .oldPhoneModalNeeded в качестве предка.

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

с которой он связан) - но пока он не работает, когда прокручивается на мобильном устройстве.

Я решил эту проблему для себя, используя только фрагмент CSS в конце моих файлов CSS:

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

#content селектор - это просто идентификатор, который оборачивает мой html, поэтому я могу переопределить специфику Bootstrap (установите свой собственный id, заключающий в себе ваш модальный html).

The downside: Он не центрирован вертикально на мобильных устройствах.

The upside: Он виден, и на меньших устройствах модальный размер разумного размера займет большую часть экрана, поэтому «нецентрируемый» не будет таким очевидным.

Why it works:

Когда вы работаете на экранах с низким размером экрана с помощью адаптивного CSS Bootstrap, для устройств с экранами меньшего размера он устанавливает.modal.fade.in's' top ' на "авто". По какой-то причине браузерам мобильного веб-комплекта, похоже, не хватает времени для определения вертикального положения с помощью «авто». назначение. Так что просто переключите его обратно на фиксированное значение, и оно прекрасно работает.

Поскольку для модального режима уже задано значение postition: absolute, это значение зависит от высоты окна просмотра, а не от высоты документа, поэтому оно работает независимо от длины страницы или места прокрутки.

2

при их открытии. У меня не было проблем с ними на 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;
});
Это не работает на Android.
0

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

Решение по niftylettuce ввыпуск 2130 кажется, чтобы исправить модальные на всех мобильных платформах ...

9/1/12 UPDATE: Исправление было обновлено здесь: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);
Извините, но ссылка не работает, спасибо.
61

EDIT: An неофициальная модификация Bootstrap был построен для решения адаптивных / мобильных проблем. Это, пожалуй, самый простой и легкий способ решить проблему.

С тех пор было найдено исправление водин из вопросов, которые вы обсуждали ранее

в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; 
 }
К вашему сведению @Maurice Я обновил ответ, чтобы отразить новый проект Github, который решает эту проблему в более элегантном решении.
в .modal есть ошибка У вас есть верх: 3% и низ: 3%. Если вы удалите нижнюю часть: 3%, она работает как положено.
@MartinBookaWeser круто отредактировал мой комментарий спасибо!
Исправлена проблема для меня на iPhone с ios 6 (независимо от версии Safari)
Я посчитал необходимым также добавить дно: 3%; в мобильной версии CSS в классе .modal, чтобы на мобильном телефоне можно было прокрутить до самого конца модального режима. Также будьте осторожны с max-height для рабочего стола. Чтобы избежать в настольной версии, что тело модала очень маленькое, и нижний колонтитул модала находится на основной экран, я добавил max-height до 1200 px;

Похожие вопросы