CSS / JavaScript (jQuery)... enable/disable scroll on popup

PsychicTide 0 11 Views

Hello friends, it's been some times since I've posted here, but this community has always been my "I really need help" place to go.

Lets get to the idea... I have a WordPress (dislike WP very much) site I'm customizing. Have a popup iFrame on click that is built into the theme, and in that iFrame, I have thumbnails that all have a popup on top of that iFrame (100% height/whatever).

Scenario: I click the first page link, which brings up an iFrame (same host/server) which overlays over everything in a window. Within that iFrame is a multitude of thumbnails, which when clicked, make another popup that covers everything within the iFrame showing image and details of the thumbnail.

Issue: I can get the body of the main window and the body of the iFrame to stop scrolling (hidden) when the thumbnail is clicked (within the iFrame), but when the thumbnail popup is closed, these CSS changes remain, making the scrolling disappear forever.

Long story short: I can kill scrolling on the main body and iFrame body, but cant reset scroll to work when closing the thumbnail popup... please let me know if I can explain better!

The JS for clicking a thumbnail...


    //click event for thumbnail popup
    jQuery('.see_CB_wrap').click(function(){
    jQuery('.CB_wrap_background').toggle();

    //some scroll values for later use (not important right now)
    const scrollY = window.top.jQuery('body').top;
    const scrollY2 = window.jQuery('body').top;

    //Action of iFrame body CSS
    jQuery('body').css('height', '100vh');
    jQuery('body').css('overflow-y', 'hidden');
    jQuery('body').css('position', 'fixed');
    jQuery('body').css('top', '-jQuery{window.scrollY}px');
    jQuery('body').css('padding-right', '15px');

    //action of main window body CSS
    window.top.jQuery('body').css('height', '100vh');
    window.top.jQuery('body').css('overflow-y', 'hidden');
    window.top.jQuery('body').css('position', 'fixed');
    window.top.jQuery('body').css('top', '-jQuery{window.scrollY}px');
    window.top.jQuery('body').css('padding-right', '15px');
    
    })

The JS for clicking anywhere to close the thumbnail popup...

    //click event for thumbnail close
    jQuery('.close_pop').click(function(){
    jQuery('.CB_wrap_background').display('none');

    //Action of iFrame body CSS
    jQuery('body').css('height', '100%');
    jQuery('body').css('overflow-y', 'scroll');
    jQuery('body').css('position', '');
    jQuery('body').css('top', '');
    jQuery('body').css('padding-right', '0');

    //action of main window body CSS
    window.top.jQuery('body').css('height', '100%');
    window.top.jQuery('body').css('overflow-y', 'scroll');
    window.top.jQuery('body').css('position', '');
    window.top.jQuery('body').css('top', '');
    window.top.scrollTo(0, parseInt(scrollY || '0') * -1);
    window.scrollTo(0, parseInt(scrollY2 || '0') * -1);
    window.top.jQuery('body').css('padding-right', '0');
    
    });
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview