Main scrollbar disappears upon triggering a modal, page content shifts right

  • Is there a way to prevent the main scrollbar from disappearing after triggering a modal? The content shifts right and it looks off.

Viewing 2 replies - 1 through 2 (of 2 total)

  • A few people are asking about this, me included. You’re the most recent posting, so I’ll reply here =). I’ve spent the day learning about this, it’s actually a talked-about issue in web development, and specifically Bootstrap (which is used to render the modal). The plugin author mentions plans to include this in the plugin, but it’s been a long while and it doesn’t seem to be in the plugin yet (I don’t see it in the code).

    To stop page shifting when the modal comes up:

    Add this to your theme’s style.css:

    html.modal-open {

    /* All of this stops the page from scrolling in the background, especially important on mobile devices. */
    -ms-overflow-style: scrollbar;
    overflow: hidden;
    height: 100%;

}

body.modal-open {

  /* This is the crucial rule to get rid of the page shift when opening a modal */
  overflow: auto !important;

  /* You may want to explore toggling this, depending on your circumstances (page length and/or presence of page scroll bars) */
  height: 100%;

}

    Add this to your theme’s scripts:

    jQuery(document).ready(function($) {

    /* The following adds/removes classes to <html> accordingly */

    $('#mypopup').on('show.bs.modal', function (e) {
        $('html').addClass('modal-open');
    })

    $('#mypopup').on('hide.bs.modal', function (e) {
        $('html').removeClass('modal-open');
    })

});
    • This reply was modified 6 years, 4 months ago by MountainSmoke.

    I also had this question so thanks for the excellent solution @mountainsmoke !!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Main scrollbar disappears upon triggering a modal, page content shifts right’ is closed to new replies.

Tags