La modale Twitter Bootstrap sur les appareils mobiles

Question

Les modales Bootstrap ne fonctionnent pas correctement sur Android et iOS. L'outil de suivi des problèmes reconnaît le problème mais ne propose pas de solution fonctionnelle :

Les fenêtres modales de la version 2.0 ne fonctionnent pas sur les mobiles.

La fenêtre modale en 2.0 ne se positionne pas correctement

L'écran s'assombrit mais la modale elle-même n'est pas visible dans la fenêtre d'affichage. Il est possible de la trouver en haut de la page. Le problème survient lorsque vous avez fait défiler la page vers le bas.

Voici une partie pertinente de 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;
}

Y a-t-il une solution que je puisse appliquer ?

Answer 1

EDIT : Un modification non officielle de Bootstrap Modal a été conçu pour répondre aux problèmes de réactivité et de mobilité. C'est peut-être la façon la plus simple et la plus facile de remédier au problème.

Un correctif a depuis été trouvé dans un des problèmes dont vous avez discuté plus tôt

sur bootstrap-responsive.css

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

et en bootstrap.css

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

Answer 2

La réponse de Gil est prometteuse (la bibliothèque dont il a donné le lien) --- mais pour l'instant, elle ne fonctionne toujours pas lorsqu'on la fait défiler vers le bas sur l'appareil mobile.

J'ai résolu le problème en utilisant simplement un extrait de CSS à la fin de mes fichiers CSS :

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

En #content est simplement un identifiant qui englobe mon code html afin que je puisse passer outre la spécificité de Bootstrap (définissez votre propre identifiant pour englober votre code html modal).

L'inconvénient : Il n'est pas centré verticalement sur les appareils mobiles.

Le bon côté des choses : C'est visible, et sur les petits appareils, une modale de taille raisonnable occupera une grande partie de l'écran, de sorte que le "décentrage" ne sera pas aussi apparent.

Pourquoi ça marche :

Avec le CSS réactif de Bootstrap, pour les appareils dotés d'écrans plus petits, il définit .modal.fade.in de "top" à "auto". Pour une raison quelconque, les navigateurs webkit mobiles semblent avoir du mal à déterminer le placement vertical avec l'affectation "auto". Il suffit donc de le remettre à une valeur fixe pour que cela fonctionne parfaitement.

Étant donné que la modale est déjà réglée sur postition : absolute, la valeur est relative à la hauteur de la fenêtre d'affichage, et non à la hauteur du document, de sorte qu'elle fonctionne quelle que soit la longueur de la page ou l'endroit où vous avez défilé.

Answer 3

La solution par niftylettuce en numéro 2130 semble corriger les modales sur toutes les plateformes mobiles...

MISE À JOUR DU 9/1/12 : Le correctif a été mis à jour ici : plugins twitter bootstrap jquery

(le code ci-dessous est plus ancien mais fonctionne toujours)

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

Answer 4

Nous utilisons ce code pour centrer les boîtes de dialogue modales Bootstrap lorsqu'elles s'ouvrent. Je n'ai pas eu de problème avec elles sur iOS en utilisant ce code mais je ne suis pas sûr que cela fonctionne pour 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;
});

Answer 5

OK, cela résout le problème. J'ai essayé aujourd'hui, le 5 septembre 2012, mais vous devez vous assurer de vérifier la démo.

La solution proposée par niftylettuce dans le numéro 2130 semble corriger les modales dans tous les cas. plateformes mobiles...

9/1/12 UPDATE : Le correctif a été mis à jour ici : plugins twitter bootstrap jquery

voici le lien vers le Démo Cela fonctionne très bien, voici le code que j'ai utilisé

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