0

I am using Bootstrap v3.3.5. Every time a modal box is triggered, the scroller hides thereby jerking the webpage. Could you please suggest me a fix.

URL: http://goo.gl/kwn7YH The modal is triggered by the Enquiry button on the right. I tried adding cutsom JS to remove margin / padding but didn't work:

$(document).on( 'hidden.bs.modal', '.modal', function() {
    $(document.body).removeClass( 'modal-scrollbar' );
}).on( 'show.bs.modal', '.modal', function() {
    // Bootstrap's .modal-open class hides any scrollbar on the body,
    // so if there IS a scrollbar on the body at modal open time, then
    // add a right margin to take its place.
    if ( $(window).height() < $(document).height() ) {
        $(document.body).addClass( 'modal-scrollbar' );
    }
});
})(window.jQuery);
});
Dixit puneet
  • 31
  • 2
  • That link you posted doesn't work. It goes to your local host. – Shaunak Aug 06 '15 at 13:49
  • @Shaunak updated link! http://goo.gl/kwn7YH i was lost in code :) – Dixit puneet Aug 06 '15 at 13:51
  • Maybe this work for you. It's doesn't hide scrollbar, instead it block it. http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it – Klaujesi Aug 06 '15 at 13:56
  • FWIW there is a HUGE discussion going on about this on Bootstrap and thee are plenty of workarounds there. You will have to try them out yourself, because most of them require knowledge of full site structure and css . Take a look : https://github.com/twbs/bootstrap/issues/9855 – Shaunak Aug 06 '15 at 14:10
  • look at this answer too: http://stackoverflow.com/a/27244312/726239 – Shaunak Aug 06 '15 at 14:13

1 Answers1

0

Try and use $('#myModal').hasClass('in'); and then apply 17px padding to the right of your button when its active.

Ryan89
  • 1,166
  • 14
  • 20
  • Its not just the button that jumps.. scroll down on the site so the nav-bar sticks to top and then hit the button, you can see the whole top bar jump.. – Shaunak Aug 06 '15 at 14:08