Twitter Bootstrap modal en dispositivos móviles

Los modales de Bootstrap no funcionan correctamente en Android e iOS. El rastreador de problemas reconoce el problema pero no ofrece una solución funcional:

Los modales en 2.0 están rotos en dispositivos móviles.

La ventana modal en 2.0 no se posiciona correctamente

La pantalla se oscurece pero el modal en sí no es visible en la ventana gráfica. Es posible encontrarlo en la parte superior de la página. El problema ocurre cuando se ha desplazado hacia abajo en la página.

Aquí hay una parte relevante 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;
}

¿Hay alguna solución que pueda aplicar?

preguntado el 03 de mayo de 12 a las 19:05

12 Respuestas

EDITAR: un Modificación no oficial de Bootstrap Modal se ha creado para abordar problemas de respuesta/móviles. Esta es quizás la forma más simple y fácil de remediar el problema.

Desde entonces se ha encontrado una solución en uno de los temas que discutiste anteriormente

in bootstrap-responsive.css

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

y en bootstrap.css

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

respondido 30 nov., 12:17

Me solucionó el problema en un iPhone con ios 6 (cualquiera que sea la versión de Safari que sea) - Ícaro

hay un error en .modal. Tienes arriba: 3% y abajo: 3%. Si quita la parte inferior: 3% está funcionando como se esperaba. - Martín Booka Weser

FYI @Maurice actualicé la respuesta para reflexionar sobre un nuevo proyecto de Github que resuelve este problema en una solución más elegante. - acuerdo

Encontré necesario agregar también bottom: 3%; en la versión móvil css en la clase .modal para que en el móvil, sea posible desplazarse hasta el final del modal. También tenga cuidado con la altura máxima para la versión de escritorio. PARA evitar en la versión de escritorio que el cuerpo del modal sea muy pequeño y el pie de página del modal esté en la pantalla principal, agregué una altura máxima de 1200 px; - mártir

La respuesta de Gil es prometedora (la biblioteca a la que se vinculó), pero por el momento, todavía no funciona cuando se desplaza hacia abajo en el dispositivo móvil.

Resolví el problema por mí mismo usando solo un fragmento de CSS al final de mis archivos CSS:

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

La #content selector es simplemente una identificación que envuelve mi html para que pueda anular la especificidad de Bootstrap (configurada en su propia identificación que envuelve su html modal).

La baja: No está centrado verticalmente en los dispositivos móviles.

Lo positivo: Es visible y, en dispositivos más pequeños, un modal de tamaño razonable ocupará gran parte de la pantalla, por lo que el "no centrado" no será tan evidente.

¿Por qué funciona:

Cuando tiene tamaños de pantalla bajos con CSS receptivo de Bootstrap, para dispositivos con pantallas más pequeñas, establece .modal.fade.in's 'superior' a 'automático'. Por alguna razón, los navegadores webkit móviles parecen tener dificultades para determinar la ubicación vertical con la asignación "automática". Así que simplemente vuelva a cambiarlo a un valor fijo y funciona muy bien.

Dado que el modal ya está configurado en posición: absoluto, el valor es relativo a la altura de la ventana gráfica, no a la altura del documento, por lo que funciona sin importar qué tan larga sea la página o hacia dónde se desplace.

Respondido el 02 de Septiembre de 12 a las 07:09

La solución de niftylettuce in problema 2130 parece arreglar modales en todas las plataformas móviles...

9/1/12 ACTUALIZACIÓN: La solución se ha actualizado aquí: complementos jquery de arranque de twitter

(el código a continuación es más antiguo pero aún funciona)

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

Respondido el 19 de junio de 13 a las 11:06

Usamos este código para centrar los cuadros de diálogo modales de Bootstrap cuando se abren. No he tenido ningún problema con ellos en iOS mientras usaba esto, pero no estoy seguro de si funcionará para 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;
});

contestado el 09 de mayo de 12 a las 18:05

Es cierto que no probé ninguna de las soluciones enumeradas anteriormente, pero (eventualmente) estaba saltando de alegría cuando lo intenté. Proyecto Bootstrap-modal de jschr en Bootstrap 3 (vinculado a en la respuesta superior). El js me estaba dando problemas, así que lo abandoné (tal vez el mío fue un problema único o funciona bien para Bootstrap 2), pero los archivos CSS por sí solos parecen funcionar en el navegador nativo 2.3.4 de Android.

En mi caso, he recurrido hasta ahora a usar la detección de agente de usuario (subóptima) antes de usar las anulaciones para permitir el comportamiento esperado en los teléfonos modernos.

Por ejemplo, si desea que todos los teléfonos Android versión 3.x e inferiores solo usen el conjunto completo de trucos, puede agregar una clase "oldPhoneModalNeeded" al cuerpo después de la detección del agente de usuario usando javascript y luego modificar las propiedades CSS modal de Bootstrap de jschr para siempre tenga .oldPhoneModalNeeded como antepasado.

contestado el 07 de mayo de 15 a las 10:05

puede agregar esta propiedad globalmente en 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);
 }

Respondido 26 ago 15, 18:08

Bien, esto lo soluciona. Lo probé hoy, 5 de septiembre de 2012, pero debes asegurarte de revisar la demostración.

La solución de niftylettuce en el número 2130 parece arreglar los modales en todas las plataformas móviles...

ACTUALIZACIÓN DEL 9 DE SEPTIEMBRE DE 1: La solución se ha actualizado aquí: complementos jquery de arranque de twitter

aquí está el enlace a la Demo Funciona muy bien aquí está el código que usé

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

Respondido el 19 de junio de 13 a las 11:06

Mi solución...

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

Respondido el 11 de enero de 14 a las 16:01

Encontré una solución muy hacky a este problema, pero funciona. Agregué una clase al enlace que se usa para abrir el modal (con el objetivo de datos), luego, usando Jquery, agregué un evento de clic a esa clase que obtiene el objetivo de datos, encuentra el modal que se supone que debe abrir y luego lo abre a través de Javascript. Funciona bien para mí. También agregué una verificación móvil en la mía para que solo se ejecute en el móvil, pero eso no es obligatorio.

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

contestado el 13 de mayo de 15 a las 01:05

Principalmente problema modal de Nexus 7, modal estaba bajando la pantalla

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

respondido 27 nov., 16:14

para mi solo $('[data-toggle="modal"]').click(function(){}); está funcionando bien

Respondido el 28 de junio de 17 a las 00:06

Si bien esta pregunta es bastante antigua, algunas personas aún pueden tropezar con ella cuando buscan una solución para mejorar la experiencia de usuario de los modales en los teléfonos móviles.

Hice una biblioteca para mejorar el comportamiento de los modales de Bootrsrap en los teléfonos.

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

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

Respondido 29 ago 18, 08:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.