Bootstrap 3 длинный модальный прокручиваемый фон на Android

Question

У меня есть длинный модальный, который не отображается полностью на моем мобильном устройстве Android, кнопки внизу внизу экрана, модальный не прокручивает вообще, а сероватый фон за модальным, есть ли какой-либо css/js трюк, чтобы заблокировать фон и позволить прокручивать модальный, пока этот отображается?

Answer 1

Это было Предполагалось, что исправлено с помощью Bootstrap 3, но для меня это не работает. Я смог исправить остроумие с помощью комбинации CSS-свойства -webkit-overflow-прокрутки и установки максимальной высоты моего модального. Поскольку я хотел, чтобы мой модал заполнял весь экран, мне пришлось подключить некоторый javascript для обнаружения мобильных устройств и установить максимальную высоту моего .modal-контента на высоту окна просмотра моего устройства.

Вот что я так, чтобы решить эту проблему, используя библиотеку под названием jRespond:

Добавить CSS в ваших модальностей

@media (max-width: $screen-xs-max) { 
    .modal-dialog { 
    .modal-content { 
     -webkit-overflow-scrolling: touch; 
     overflow-y: auto; 
    } 
    } 
} 

Добавить jRespond в приложение

https://github.com/ten1seven/jRespond/edit/master/js/jRespond.js

Добавьте следующий код в ваш main.js сценарий

/* This code handles the responsive modal for mobile */ 
    var jRes = jRespond([{ 
     label: 'handheld', 
     enter: 0, 
     exit: 767 
    }]); 

    jRes.addFunc({ 
     breakpoint: 'handheld', 
     enter: function() { 
     $('.modal-content').css('max-height', $(window).height()); 
     $(window).on('orientationchange', function() { 
      $('.modal-content').css('max-height', $(window).height()); 
     }); 
     }, 
     exit: function() { 
     $('.modal-content').css('max-height', ""); 
     $(window).off('orientationchange'); 
     } 
    }); 

Answer 2

Это может из-за позиции модального класса фиксировано ... Попробуйте поместить этот код в файл CSS, это работа для меня ...

@media (max-width: 767px) { 
    .modal { 
     position: absolute; 
     overflow:visible; 
    } 
    .modal-open { 
     overflow:visible; 
    } 
}