Modal Box Forces Page Scroll

  • Resolved lospeso

    (@lospeso)


    5 years, 5 months ago

    This occurs with any content within the modal box.
    When the close button or “X” is clicked, it forces the page to scroll back to the top.

    If I remove the “X” and close button and simply click outside of the modal box to close it and view the rest of the page, it still forces the page to scroll back to the top.

    If I was to use the modal box, like a page menu list, to click an anchor link which correctly causes the page to scroll to that anchor, this is then completely defeated when I try to close the modal box as described above, the modal box closure forces the page to scroll back to the top.

    So any content in the modal box, be it simple text, a video, menu list, images, it does not matter and the same issue as described above.

    There is no setting for this widget to stop that page scroll.

    Is this a bug??

Viewing 5 replies - 1 through 5 (of 5 total)
  • leap13support

    (@leap13support)

    5 years, 5 months ago

    Hi @lospeso,

    Thanks for contacting Leap13 support!

    Well, I would be so glad to check things further from your end, so could you please share a link where I can find the issue so I can see what is actually going there?

    Regards

    Thread Starter lospeso

    (@lospeso)

    5 years, 5 months ago

    Sure.

    Here is the URL: https://communityplus.ca/elementor-test-page/

    I also did a little more testing, here is what I found.

    Second Test

    • Modal Box 7 Button inserted halfway down the page
    • Opening and closing the modal box, without page scroll while open, all works fine, the page does not scroll when modal box is closed by a button, by “X” or clicking outside the box
    • Opening and closing the modal box, with a page scroll while open, issue occurs, the page scrolls back up to where the modal box was inserted.

    In my initial post, I had the modal box at the top of the page, and that is why it scrolled back to the top. The second test confirms the scroll of the page actually returns to where the modal box was inserted on the page.

    It appears the modal box is using an page anchor element to close it.

    This is a common issue with modals, yet it can be eliminated with some Javascript.
    I will leave the fix to you.

    leap13support

    (@leap13support)

    5 years, 5 months ago

    Hi @lospeso,

    Hope you’re having a great day 🙂

    Well, I’ve checked your page, and I was able to reproduce the issue. So, could you please add Elementor HTML widget to your page, then copy/paste the below custom JS code to it:

    <script >
    window.onload = function() {
        const $ = jQuery;
        $('.premium-modal-box-modal').on('shown.bs.modal', function(e) {
            $('body').css("overflow", "hidden");
        })
        $('.premium-modal-box-modal').on('hidden.bs.modal', function(e) {
            $('body').css("overflow", "auto");
        })
    } 
</script>

    Please let me know if you still need help 🙂

    Regards

    Plugin Author Leap13

    (@leap13)

    5 years, 5 months ago

    Hi @lospeso

    We didn’t hear back from you, so please let us know if you still need any further assistance.

    Regards

    Thread Starter lospeso

    (@lospeso)

    5 years, 5 months ago

    Thanks for the help.

    Couldn’t get to test the script you gave, not yet, got sidelined with other things.

    Give me a few days and I will test it and reply back here with the results.

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

The topic ‘Modal Box Forces Page Scroll’ is closed to new replies.