I had to create a disabled button for “Agree to Terms” lightbox made with WP Popup Maker plugin. The plugin is free, but the extension allowing this functionality was commercial. So I’ve made it myself. In general this JavaScript will work for any other lightbox too.
I’ve been reported that there are some bugs on zoomed browser windows and the Agree button never gets enabled there. So had to change the scroller structure a bit with more HTML and CSS. But the result seems to be bullet-proof for all modern browsers zooming problem.
See the Pen Scroll to Enable Agree Button for Terms Lightbox by Iggy (@webprom) on CodePen.
The CSS includes scrollbar design modification for WebKit-based browsers, like Chrome and Safari. On iPhone scrollbar was not so visible, so I added color to the scroll bar thumb on smaller screens. Then I make it gray for wider screens with @media query.
PopupMaker Changes for Several Popups Together
Popup Maker is a good plugin with many settings and options. We can control
The problem is that my Terms popup was meant to open on a page that sometimes could have another site-wide popup, GDPR notice. So after Terms popup was closing I had to enable scrolling on scroll-blocked lightbox overlay background too. Because with 2 popups after closing the top one, scroll was still disabled. This is a bit tricky and had to study Popup Maker documentation a bit.
Apparently it’s possible to make:
// disable overlay blocking after agree popup closes
$('#pum-ID-of-closed-popup').on('pumAfterClose', function () {
$('html.pum-open.pum-open-overlay').removeClass('pum-open-overlay');
});Add inside JavaScript jQuery ready. it removes class that blocks the scroll after top popup disappears.
