In Bootstrap 3, a modal window has a bug that occurs when rendering the position of input elements in a modal window when the virtual keyboard is called on iOS devices. To solve this problem, usually switch elements in position:absolute . I tried to use this script:

 $(document).ready(function(){ var isiPhone = /iPhone/i.test(navigator.userAgent.toLowerCase()); if(isiPhone) { $('.modal').on('shown.bs.modal', function() { $(this) .css({ position: 'absolute', marginTop: $(window).scrollTop() + 'px', bottom: 'auto', }); setTimeout( function() { $('.modal-backdrop').css({ position: 'absolute', top: 0, left: 0, width: '100%', height: Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ) + 'px' }); }, 500); var currentscroll = $(window).scrollTop(); $('input').on('blur', function() { if (!event.relatedTarget) { $(window).scrollTop(currentscroll); } }); });}});

In general, it works well. A modal window opens in the place where it was called, the unpleasant jerky scrolls disappeared when the keyboard was called. But if the page is long (and it turns out this way on mobile devices), large spaces appear before and after the modal window, and the window scrolls along with the page content, which is not always good.
Is it possible to somehow limit the scroll of the modal window to some extent?

  • when you open the window, hang overflow: none on the body , return overflow: auto when you close it - Vasily Barbashev
  • @ Vasily Barbashev. added $('body').css({ overflow: 'none', }); to the script when opening the window $('body').css({ overflow: 'none', }); Anyway, the window will scroll with the body. - Maksim Rubchenko
  • maybe, at the window, the scroll will disappear altogether, or you have another scrolling block. In other words, it is necessary to hang overflow: none on the scrolling block, then the page will not have a scroll and will not be able to scroll. - Vasily Barbashev
  • @ Vasily Barbashev. in order. I added overflow: none to the existing script (which is higher). I tried separately. modal window does not scroll. but it does not scroll without a script, because .modal position fixed. But with position fixed, problems with focusing the keyboard begin. Possible overflow: none body does not work because Bootstrap has a restriction on this matter and the body will be scrolled along with the modal window. and get around it fails. - Maksim Rubchenko
  • That's impossible. already implemented similar. And by the way, at the window position:fixed , this is very bad, because A modal window cannot be scrolled if it is larger than the client window. Bootstrap removes (and should remove) the global scroll by the window and put it under the modal window. You can see an example from homepage.rf by clicking on the calculator - Vasily Barbashev

0