Support » Plugin: PopBox For Elementor » Main scrollbar disappears upon triggering a modal, page content shifts right

  • besweeet

    (@besweeet)


    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 9 months, 2 weeks ago by  MountainSmoke.
    omalleyjacqui

    (@omalleyjacqui)

    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.