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

Question

PsychicTide 42 Junior Poster

1 Day Ago

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');

});

javascript jquery

Edited 18 Hours Ago by Dani because: Converted to question

1 Contributor
1 Reply
34 Views
1 Day Discussion Span
Latest Post 1 Hour Ago Latest Post by PsychicTide

Reply to this topic

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.

PsychicTide 42 Junior Poster · Answer 1 · 2025-01-12T11:36:27+00:00

Hey all, turns out this was a classic case of looking at the same code too long and burned out my mind. I added the " .close_pop " class to the popup div and boom, fixed. I also added a height: 100vh and overflow: scroll on the same div, so that overflow would scroll while both body tags are not scrollable.

Below is the final result of the code which seems to work fine...

The JS for clicking a thumbnail...

jQuery('.see_CB_wrap').click(function(){
jQuery('.CB_wrap_background').toggle();
jQuery('.CB_wrap_table').css('overflow-y', 'scroll');
jQuery('.CB_wrap_table').css('height', '100vh');

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');
jQuery('.CB_wrap_table').css('overflow-y', 'scroll');

//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...

jQuery('.close_pop').click(function(){
jQuery('.CB_wrap_background').toggle();

//action of Iframe body CSS
jQuery('body').css('height', '100%');
jQuery('body').css('overflow-y', 'scroll');
jQuery('body').css('position', 'static');
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', 'static');
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');

});

Always remember that sometimes you just need to walk away for a while and refresh your brain.

Thank you all for looking at this post, and thank you for the format edit Dani!!

Hope this helps someone later on.