gf-modal

/* PHP/Mark-up used to add the modal to the template */

add_action( 'wp_footer', array( $this, 'email_form_overlay' ), 1 );
function email_form_overlay() {
    ?>
    <div class="modal" aria-describedby='modal-description' aria-hidden="true">
            <div class="modal-overlay js-modal-overlay"></div>
            <div class="modal-canvas">
                <?php gravity_form( 1, false, true, false, array(), true); ?>
                <div class="icon-close js-modal-close"></div>
                <div class='screen-reader-text' id='modal-description'>
                    This is a dialog window which overlays the main content of the page. The modal instructs you to enter your email address to recieve an email of the product as it is configured. Pressing the Close Modal button at the top of the modal will close the modal and bring you back to where you were on the page.
                </div>
            </div>
        </div>
    <?php
}


/* JavaScript Controlling the Modal */

'use strict';

(function( $ ) {

    $( function() {
        var $modalTrigger = $('.js-modal-trigger'),
            $modalClose = $('.js-modal-close'),
            $modalOverlay = $('.js-modal-overlay'),
            $modalContent = $('.modal'),
            $modalStart = $modalContent.find('input:not(.gform_hidden)').first();
        
        $modalTrigger.on('click', displayModal);
        $modalClose.on('click', displayModal);
        $modalOverlay.on('click', displayModal);

        function displayModal() {
            console.log('start',$modalStart);
            if ( $modalContent.hasClass('is-zoomed') ) {
                //close modal
                $modalContent.removeClass('is-zoomed');
                $modalContent.attr('aria-hidden',true);
                $modalContent.siblings('#page').attr('aria-hidden',false);
                $modalTrigger.focus();
                

            } else {
                $modalContent.addClass('is-zoomed');
                $modalContent.attr('aria-hidden',false);
                $modalContent.siblings('#page').attr('aria-hidden',true);
                $modalStart.focus();
            }
        }

        $(document).ready(function(){
            setTimeout(function(){
                displayModal();
            },3000);
        });
    });

})( jQuery );



/* SCSS for Modal */

.modal-overlay {
    background-color: transparent;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: background-color .4s ease;
    z-index: -10;
}

.modal-canvas {
    @include rem(max-width, 600px);
    @include rem(padding, 30px);
    background-color: $white;
    overflow: auto;
    position: fixed;
    top: -100%;
    transition: top .3s ease;
    transform: translateY(-50%);
    width: 100%;
    z-index: 10;
}

.modal {
    align-items: center;
    display: flex;
    justify-content: center;
    z-index: 10;

    .icon-close {
        @include rem(right, 10px);
        @include rem(top, 10px);
        position: absolute;
    }

    &.is-zoomed {
        .modal-overlay {
            background-color: rgba(0, 0, 0, .8);
            z-index: 10;
        }

        .modal-canvas {
            top: 50%;
        }
    }
}

@krissie-northux Do you like this method for only showing the pop-up once every 30 days (or whenever cookies are cleared)?

        $(document).ready(function () {

            if (document.cookie.indexOf("popup=true") == -1) {
                document.cookie = "popup=true; max-age=2592000"; // 30 days in seconds

                setTimeout(function () {
                    displayModal();
                }, 3000);
            }

        });

Yes, I think that should work! I can give you more code snippets if you want to get nuanced with cookies, but that might be over-engineering it for your use.

Perfect! I'll roll with this. TY again for your help!