scroll - Bootstrap 3 long modal scrolling background on Android -
i have long modal doesn't display on android mobile device, buttons bellow bottom of screen, modal doesn't scroll @ grayish background behind modal does, there css/js trick lock background , allow modal scroll while 1 displayed ?
this supposed fixed bootstrap 3, not working me. able fix wit combination of -webkit-overflow-scrolling css property , setting max-height of modal. since wanted modal fill whole screen, had wire javascript detect mobile devices , set max-height of .modal-content viewport height of device
here did solve using library called jrespond:
add css modals
@media (max-width: $screen-xs-max) { .modal-dialog { .modal-content { -webkit-overflow-scrolling: touch; overflow-y: auto; } } }
add jrespond application
https://github.com/ten1seven/jrespond/edit/master/js/jrespond.js
add following code main.js script
/* code handles responsive modal 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'); } });
Comments
Post a Comment