Topic: GB overlay modal position at bottom for mobile

vidyutdev
October 28, 2025 at 8:25 am

Hi, i wanna make my modal to be at bottom for mobile, like this;
https://i.postimg.cc/jdWjjP7r/Screenshot-20251028-183912.jpg

I tried adding a wrapper of full width and height and place the inside modal box accordingly, which was perfect.

But it won’t let my modal close on clicking outside. As I can see by default there is GenerateBlocks overlay div i guess…

What would be the solution?

Thanks….
Ying
October 28, 2025 at 2:58 pm

Hi there,

Can you provide your site link where we can see this modal?

Let me know 🙂
Ying
October 28, 2025 at 2:58 pm

Hi there,

Can you provide your site link where we can see this modal?

Let me know 🙂
vidyutdev
October 28, 2025 at 7:38 pm

Click on the “Share Icon” in the Hero section in Mobile.

The modal is placed at bottom using the outer wrapper.

But because of that wrapper i added, closing by clicking outside is not possible now…..

Alvind

October 28, 2025 at 11:19 pm

Hi there,

Remove the wrapper you added and instead add this snippet:

add_action('wp_footer', function () {
?>
    <script>
        (function() {
            function updateOverlayPosition() {
                const overlays = document.querySelectorAll('#gb-overlay-25849');
                const isMobile = window.innerWidth < 768;

                overlays.forEach(function(overlay) {
                    if (isMobile) {
                        overlay.setAttribute('data-gb-overlay-position', 'bottom-center');
                        overlay.classList.remove('gb-overlay--center');
                        overlay.classList.add('gb-overlay--bottom-center');
                    } else {
                        overlay.removeAttribute('data-gb-overlay-position');
                        overlay.classList.remove('gb-overlay--bottom-center');
                    }
                });
            }

            // Run on load
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', updateOverlayPosition);
            } else {
                updateOverlayPosition();
            }

            // Run on resize (debounced)
            let resizeTimer;
            window.addEventListener('resize', function() {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(updateOverlayPosition, 150);
            });
        })();
    </script>
<?php
}, 999);

Adding PHP: https://docs.generatepress.com/article/adding-php/

This snippet adds a gb-overlay--bottom-center class and its corresponding attribute to the main overlay wrapper specifically on mobile breakpoints, positioning the overlay at the bottom center.

In the overlay editor, make sure the Position is set to Center so it remains centered on desktop.

vidyutdev
October 30, 2025 at 6:54 am

Thanks..
Alvind
October 30, 2025 at 7:49 pm

You’re welcome

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

GB overlay modal position at bottom for mobile