Twitter Bootstrap modal na urządzeniach mobilnych

Odpowiedź Gila jest obiecująca (biblioteka, z którą się połączył) --- ale na razie nadal nie działa po przewinięciu w dół na urządzeniu mobilnym.

Sam rozwiązałem problem używając tylko fragmentu CSS na końcu moich plików CSS:

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

Selektor #content jest po prostu identyfikatorem, który zawija mój html, więc mogę nadpisać specyfikę Bootstrap (ustawić na swój własny identyfikator zawijający modalny html).

Minusem: nie jest wyśrodkowany pionowo na komórce urządzenia.

Plusy: jest widoczny, a na mniejszych urządzeniach, w miarę duży modal zajmie dużo ekranu, więc "niecentrowanie" nie będzie tak widoczne.

Dlaczego to działa:

Gdy masz małe rozmiary ekranu z responsywnym CSS Bootstrap, dla urządzeń o mniejszych ekranach ustawia . modal.fade.in 'top' do 'auto'. Z jakiegoś powodu mobilne przeglądarki webkit wydają się mieć trudności z wymyśleniem pionowego umieszczenia z zadanie "auto". Więc po prostu przełącz go z powrotem na stałą wartość i działa świetnie.

Ponieważ modal jest już ustawiony na postition: absolute, wartość jest względna do wysokości okna widoku, a nie do wysokości dokumentu, więc działa bez względu na to, jak długa jest strona lub gdzie jest przewijany.

Rozwiązanie niftylettuce w issue 2130 wydaje się naprawiać Modale we wszystkich platformach mobilnych...

9/1/12 aktualizacja : poprawka została zaktualizowana tutaj: twitter Bootstrap jQuery plugins

(poniższy kod jest starszy, ale nadal działa)

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

Używamy tego kodu, aby wyśrodkować okna dialogowe Modalne Bootstrap, gdy są otwarte. Nie miałem żadnego problemu z nimi na iOS podczas korzystania z tego, ale nie jestem pewien, czy będzie to działać na Androida.

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

Wprawdzie nie próbowałem żadnego z powyższych rozwiązań, ale (w końcu) skakałem z radości, kiedy próbowałem projektu Bootstrap-modal jschr w Bootstrap 3 (link do w górnej odpowiedzi). Js sprawiał mi kłopoty, więc porzuciłem go (może mój był unikalnym problemem lub działa dobrze dla Bootstrap 2), ale Pliki CSS na własną rękę wydają się robić sztuczkę w natywnej przeglądarce Androida 2.3.4.

W moim przypadku, uciekłem się do tej pory do korzystania z (sub-optymalne) wykrywanie user-agent przed użyciem przesłonięcia, aby umożliwić oczekiwane zachowanie w nowoczesnych telefonach.

Na przykład, jeśli chcesz wszystkie telefony z Androidem ver 3.x i poniżej tylko do korzystania z pełnego zestawu hacków można dodać klasę "oldPhoneModalNeeded" do ciała po wykryciu agenta użytkownika przy użyciu javascript, a następnie zmodyfikować właściwości CSS Jschr Bootstrap-modal, aby zawsze mieć .oldphonemodalne jako przodek.

Możesz dodać tę właściwość globalnie w 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);
 }

OK to naprawia to próbowałem go dzisiaj wrzesień 5-2012 ale musisz mieć pewność, aby sprawdzić demo

Rozwiązanie niftylettuce w numerze 2130 wydaje się naprawiać Modale we wszystkich podesty ruchome...

9/1/12 aktualizacja: poprawka została zaktualizowana tutaj: twitter Bootstrap jQuery plugins

Oto link do Demo To działa świetnie heres kod użyłem

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

Moje rozwiązanie...

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

Znalazłem bardzo trudne rozwiązanie tego problemu, ale to działa. Dodałem klasę do linku, która jest używana do otwarcia modalu( z data-target), następnie używając Jquery, dodałem Zdarzenie click do tej klasy, która pobiera data-target, znajduje modal, który ma otworzyć, a następnie otwiera go przez Javascript. Mi pasuje. Dodałem również mobilną kontrolę na moim, aby działała tylko na telefonie komórkowym, ale nie jest to wymagane.

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

Głównie problem modalny Nexusa 7, modal szedł w dół ekranu

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

Dla mnie po prostu $('[data-toggle="modal"]').click(function(){}); działa dobrze.

Chociaż to pytanie jest dość stare, niektórzy ludzie nadal mogą się na nie natknąć, szukając rozwiązania, aby poprawić UX modali w telefonach komórkowych.

Zrobiłem lib, aby poprawić zachowanie Modali Bootrsrap na telefonach.

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

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