Change scroll to hidden upon Popup shown?

@noelhefele – Try unchecking the fixed position option located under Display Settins when editing the popup. That should make it scroll with the page.

That should do exactly what you want.

Please take a moment to rate and review the plugin and or support.

I’m sorry if I wasn’t clear… I don’t want it to scroll with the page—the page should not scroll at all when the popup is displayed.

Thanks

[not resolved]

@noelhefele – Can you explain exactly how you want it to work then? Not quite sure I understand exactly what your after. Do you want the popups content to scroll? There are options for that if you use custom size option.

If the body tag has “overflow-y: scroll” when no pop up is visible, it would be great if the body tag could change to “overflow-y:hidden” when the popup is visible.

This would freeze the scroll.

I got it to partially work though a custom function with jquery, except I can’t figure out how to target the close “click” on the div overlay.

$('.popmake-overlay').on('click', function (e) {
                $('body').css('overflow', 'auto');
		});

is what I have but it isn’t working. If you have any suggestions for that I’d be grateful!

(for example – the code below is what I’m working with…)

<?php
}
function lock_contact_background()
{
?>
	<script type="text/javascript">
	jQuery(document).ready(function($){

		 $('#menu-item-96').on('click', function (e) {
                $('body').css('overflow', 'hidden');
		});
        $('.popmake-close').on('click', function (e) {
                $('body').css('overflow', 'auto');
		});
        $('.popmake-overlay').on('click', function (e) {
                $('body').css('overflow', 'auto');
		});
           $(document).keyup(function(e) {
  if (e.keyCode == 27) $('body').css('overflow', 'auto');    // esc
}); 

	});
	</script>

<?php
}

?>

@noelhefele – Instead of how your doing it, I would suggest hooking into our custom JS events. They are oultined here https://wppopupmaker.com/docs/overview-popup-maker-javascriptjquery-api

Specifically you could do it like this.

$('.popmake').on('popmakeBeforeOpen', function () {
  $('body').css('overflow', 'hidden');
});
$('.popmake').on('popmakeAfterClose', function () {
  $('body').css('overflow', 'auto');
});

Much simpler, more elegant and way easier to maintain :).

Hope this helps.

PS we are actually working toward a similar solution for the plugin in general https://github.com/PopupMaker/Popup-Maker/issues/38

If you use anything like Trello.com, the cards scroll with the main scroll bar while the document stays stationary when the card(popup) is open.

If your up for it we love contributors :).

As always please take a moment to rate and review the plugin and or support.

Thanks! good to know of the custom JS events. Works perfectly and simply.

(sorry for the delay!)

rated and reviewed! Will have to look into github, as I’m not much of a coder, but it could be fun to check out from time to time…

resolved!

@noelhefele – Glad you got it working, thanks for rating the plugin.

Hi, I have followed this but it doesn’t work for me. I would like to disable the scrolling on the body and let the popup scroll when it’s too long to show on the screen. The css is applied to the body but no change. Any idea?

https://pavilions.creativeworks.com.hk

Thanks!

@kopanda – I am guessing you got it worked out. I can submit the form and a new window opens. PS Please start a new ticket with some details of how to duplicate the issue on your site if its not already solved.

I’m having a similar issue and I’m not 100% sure how you fixed it. When one scrolls on iPad the popup flickers all over the page. I’d rather the page not scroll and instead just the content inside the popup scroll.

@webprese – This has changed in v1.4 now scrolling will only scroll the popup itself on mobile, not the site itself.

Hope that helps.

Great! When will you be releasing x1.4?

@webprese – We have integrated it with our new tracking api (php versions, wp versions and other misc info we use to ensure the best possible experience). We determined there were a few issues with the server end that could impact people trying to update. Due to this we made massive upgrades to infrastructure to ensure that doesn’t happen. That is all done and currently being tested. Once we are 100% certain it will not be an issue it will go out.

The beta is publicly available though I would not use it on a live site as it does migrate data, though all of that has been tested, there is no going back to previous version.

Awesome. Thanks for the data. Its a dev site at the moment and at the client review stage and this is one of the bugs. Its really only as issue with Safari iOS. I’ll keep checking for the update because I’m very keen on seeing this bug fixed so I can pass it on to the client.

Thanks for the responses and updating the plugin. Very much appreciated!