Popup Maker: Force the popup to scroll to the top if needed.

popup-maker-force-scroll-to-top-README.md

The Problem

If a popup's content is too large for the popup's window (container), 3 main issues come up:

1. Content will be cut off and there's no way to scroll to see what's been cut off.
2. Sometimes the popup initially displays with the bottom of the content showing only (not the top).
3. With the upcoming forced focus code change, if there's a focusable element such as a link at the very bottom of the popup, then focus will be on that bottom link. Again, the top content will be out of view with no way to scroll to it.

Original post: https://wordpress.org/support/topic/pop-up-close-button-appears-out-of-the-screen/

Proposed Fix

1. First add this CSS.

/* Possible fix for top of popup getting cut off. */
@media (max-width: 1023px) {
    #popmake-123 { /* Targets a specific element. */
        top: 5% !important;
        overflow-y: scroll !important; /* Enable a vertical scrollbar if needed. */
        height: 85vh;
    }
}

Remove the media query if you want to apply this CSS for all devices.

2. Install the jQuery code in this gist via the PHP hook. This is preferred. There's a pure JavaScript snippet, but that was for a specific case.

3. To account for the forced focus code update, this kind of override logic (below) needs to go into the core plugin codebase.

            var container = currentModal.find( ' .pum-container' ); 
            var content = currentModal.find ( '.pum-content.popmake-content' ); 

            // If the content overflows the container, then 
            // focus on the content to avoid focusing on something 
            // like a link at the very bottom. We also need to srcoll
            // to the top of the content.
            if ( content.height() > container.height() ) {
                content.focus();
                container.scrollTop(0);
                return;
            }
 

popup-maker-force-scroll-to-top.js

/** 
 * Pure JavaScript Version
 *
 * Install this code just before </body> tag, i.e., footer using
 * a plugin or theme setting. Remember that JavaScript needs to be
 * wrapped in <script></script> tags.
 * 
 * See below for the jQuery version installed via a PHP hook.
 */

// We need to setTimeout so the popup loads first.
setTimeout(() => {
	let popElt = document.getElementById('popmake-21766'); // Change selector as needed.
	console.log(`popElt.scrollTop = ${popElt.scrollTop}`);
	if (popElt.scrollTop !== 0) { // Only scroll to top if needed.
		popElt.scroll({
    			top: 0,
    			behavior: "smooth"
  		});
	}
},
1000); // Tweak delay as needed.

popup_maker_force_scroll_top_top.php

<?php // Ignore this line when adding the code below to your child theme's functions.php file.

/**
 * jQuery Version
 *
 * Add custom JavaScript for Popup Maker to the footer of your site. This option
 * listens for a specific Popup Maker event (pumAfterOpen).
 */
function my_custom_popup_scripts() { ?>
	<script type="text/javascript">
						
		jQuery(document).ready(function($) {
			
			// Force scroll top.
			$( '#pum-16' ).on('pumAfterOpen', function () {
				console.log('scrollTop before = ' + $( '#popmake-16' ).scrollTop());
				if ( $( '#popmake-16' ).scrollTop() !== 0) { // Only scroll to top if needed.
					$( '#popmake-16' ).scrollTop(0);
					console.log('scrollTop after = ' + $( '#popmake-16' ).scrollTop());
				}
			}); // Listener
			
		}); // jQuery
	</script><?php
}
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );
/** 
 * Add the code above to your child theme's functions.php file or 
 * use a code snippets plugin.
 */

Screen capture of a popup where the content is bigger than the popup window. With the forced focus code update, you can see the first focus is on the link at the very bottom of the popup.