it-swarm.com.de

Twitter Bootstrap modal auf mobilen Geräten

Bootstrap-Modals funktionieren unter Android und iOS nicht richtig. Der Problem-Tracker erkennt das Problem an, bietet jedoch keine funktionierende Lösung:

Modals in 2.0 sind auf dem Handy defekt.

Modalfenster in 2.0 nicht richtig positioniert

Der Bildschirm wird dunkler, aber das Modal selbst ist im Ansichtsfenster nicht sichtbar. Es ist möglich, es oben auf der Seite zu finden. Das Problem tritt auf, wenn Sie auf der Seite nach unten scrollen.

Hier ist ein relevanter Teil von 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;
}

Gibt es einen Fix, den ich beantragen kann?

65
ty.

BEARBEITEN: Eine inoffizielle Bootstrap Modal-Änderung wurde erstellt, um Probleme mit der Reaktionsfähigkeit/dem Handy zu beheben. Dies ist vielleicht der einfachste und einfachste Weg, um das Problem zu beheben.

Seitdem wurde eine Fehlerbehebung in einem der zuvor besprochenen Probleme gefunden

in bootstrap-responsive.css

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

und in bootstrap.css

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

Gil's Antwort ist ein Versprechen (die Bibliothek, mit der er verlinkt hat) - aber vorerst funktioniert es immer noch nicht, wenn auf dem mobilen Gerät nach unten gescrollt wird.

Ich habe das Problem für mich gelöst, indem ich am Ende meiner CSS-Dateien nur ein paar CSS-Schnipsel verwendete:

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

Der #content-Selektor ist einfach eine ID, die meine HTML-Datei einschließt, sodass ich Bootstraps Spezifität überschreiben kann (auf Ihre eigene ID setzen, die Ihre modale HTML-Datei einschließt).

Der Nachteil: Es ist auf den mobilen Geräten nicht vertikal zentriert.

Der Vorteil: Es ist sichtbar, und bei kleineren Geräten nimmt ein Modal von angemessener Größe einen großen Teil des Bildschirms ein, so dass das "Nicht-Zentrieren" nicht so offensichtlich ist.

Warum es funktioniert:

Wenn Sie mit Bootstraps responsivem CSS nur geringe Bildschirmgrößen haben, wird bei Geräten mit kleineren Bildschirmen .modal.fade.in 's' top 'auf' auto 'gesetzt. Aus irgendeinem Grund scheint es den mobilen Webkit-Browsern schwer zu fallen, die vertikale Anordnung mit der "Auto" -Zuweisung herauszufinden. Also einfach auf einen festen Wert zurücksetzen und es funktioniert super. 

Da das Modal bereits auf postition: absolute eingestellt ist, ist der Wert relativ zur Höhe des Viewports und nicht zur Dokumenthöhe. Es funktioniert also unabhängig davon, wie lange die Seite ist oder wohin Sie gescrollt werden.

14
jlovison

Die Lösung von niftylettuce in Ausgabe 2130 scheint Modals auf allen mobilen Plattformen zu beheben ...

9/1/12 UPDATE: Das Update wurde hier aktualisiert: Twitter Bootstrap-Jquery-Plugins

(der Code ist älter, funktioniert aber noch)

// # 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
Gil Birman

Wir verwenden diesen Code, um die modifizierten Dialogfelder von Bootstrap beim Öffnen zu zentrieren. Ich hatte während der Verwendung dieses Betriebssystems noch kein Problem, aber ich bin nicht sicher, ob es für Android funktioniert.

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

Zugegebenermaßen habe ich keine der oben aufgeführten Lösungen ausprobiert, aber ich war (schließlich) vor Freude, als ich das Bootstrap-modal-Projekt von jschr ausprobierte in Bootstrap 3 (verlinkt in der obersten Antwort). Das js gab mir Schwierigkeiten, also habe ich es aufgegeben (vielleicht war mein Problem ein einzigartiges Problem oder es funktioniert gut für Bootstrap 2), aber die CSS-Dateien selbst scheinen den Trick im nativen 2.3.4-Browser von Android zu tun.

In meinem Fall habe ich bisher auf (suboptimale) Benutzer-Agent-Erkennung zurückgegriffen, bevor die Überschreibungen verwendet wurden, um das erwartete Verhalten in modernen Telefonen zu ermöglichen.

Wenn Sie beispielsweise alle Android-Telefone ab Version 3.x und darunter nur den vollständigen Satz von Hacks verwenden möchten, können Sie dem Körper nach der Benutzeragentenerkennung mithilfe von Javascript eine Klasse "oldPhoneModalNeeded" hinzufügen und anschließend die Bootstrap-modalen CSS-Eigenschaften von jschr ändern haben immer .oldPhoneModalNeeded als Vorfahren.

1

sie können diese Eigenschaft global in Javascript hinzufügen:

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);
 }
1
Hetdev

Für mich funktioniert nur $('[data-toggle="modal"]').click(function(){}); gut.

0

Ich habe eine sehr harte Lösung für dieses Problem gefunden, aber es funktioniert. Ich fügte dem Link eine Klasse hinzu, die zum Öffnen des Modals (mit dem Datenziel) verwendet wurde. Dann wurde mit Jquery ein Klickereignis zu dieser Klasse hinzugefügt holt das Datenziel, findet das Modal, das es öffnen soll, und öffnet es dann über Javascript. Funktioniert gut für mich. Ich habe auch einen Mobile Check hinzugefügt, so dass er nur auf Mobile läuft, was aber nicht erforderlich ist. 

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

Hauptsächlich die Modal-Ausgabe von Nexus 7, Modal wurde auf dem Bildschirm angezeigt

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

Meine Lösung...

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

Obwohl diese Frage ziemlich alt ist, stolpern manche Leute möglicherweise darüber, wenn sie nach einer Lösung suchen, um die UX von Modalen auf Mobiltelefonen zu verbessern.

Ich habe mir vorgenommen, das Verhalten von Bootrsrap-Modalen auf Handys zu verbessern.

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

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

0
keaukraine

OK, dieses Problem wird behoben. Ich habe es heute am 5. September 2012 ausprobiert, aber Sie müssen unbedingt die Demo überprüfen 

Die Lösung von niftylettuce in Ausgabe 2130 scheint Modalitäten in allen mobile Plattformen ...

01.09.12 UPDATE: Das Update wurde hier aktualisiert: Twitter-Bootstrap-Jquery-Plugins

hier ist der Link zur Demo .__ Es funktioniert super mit dem Code, den ich verwendet habe 

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