Modal + iOS virtual keyboard

***************************Jquery *************************************

// This entire section makes Bootstrap Modals work with iOS
    // This entire section makes Bootstrap Modals work with iOS
    if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {

        $('.modal').on('show.bs.modal', function () {
            setTimeout(function () {
                scrollLocation = $(window).scrollTop();
                $('.modal')
                    .addClass('modal-ios')
                    .height($(window).height())
                    .css({ 'margin-top': scrollLocation + 'px' });
            }, 0);
        });

        $('input').on('blur', function () {
            setTimeout(function () {
                // This causes iOS to refresh, fixes problems when virtual keyboard closes
                $(window).scrollLeft(0);

                var $focused = $(':focus');
                // Needed in case user clicks directly from one input to another
                if (!$focused.is('input')) {
                    // Otherwise reset the scoll to the top of the modal
                    $(window).scrollTop(scrollLocation);
                }
            }, 0);
        })

    }
***************************CSS*************************************
.modal-ios {
    position: absolute;
    overflow: visible;
   
}

Comments

Popular posts from this blog

Scroll After Fixed Navigation

Bootstrap CSS Customize with SCSS CSS

Best way to prevent page scrolling on drag (mobile)