Gravity Forms Notification Popup (Genesis Framework)

gravity-forms-notification-popup-keep-form.php

<?php

//* OPTIONAL STEP - Keep the form disappearing. 
//* Gravity Forms notification popup instead of the page redirect or AJAX notification. 
//* Props to @WilliamAlexander in the comments
//* @link https://anythinggraphic.net/gravity-forms-notification-popup

add_filter( 'gform_confirmation', 'ag_custom_confirmation', 10, 4 );
function ag_custom_confirmation( $confirmation, $form, $entry, $ajax ) {
	add_filter( 'wp_footer', 'ag_overlay');
    $thisform = $form['id'];
	return '[gravityform id=' . $thisform . ' title=false description=false]' . $confirmation . '<a href="#" rel="nofollow">OK</a>';
}

gravity-forms-notification-popup.css

#overlay {
	background: #000;
	background: rgba(0, 0, 0, 0.3);
	display: block;
	float: left;
	height: 100%;
	position: fixed;
	top: 0; left: 0;
	width: 100%;
	z-index: 99;
}

#gform-notification {
	background: #fff;
	border-radius: 10px;
	display: block;
	margin: auto;
	max-height: 237px;
	max-width: 520px;
	padding: 61px;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	text-align: center;
	width: 100%;
	z-index: 101;
}

#gform-notification .button {
	margin: 20px 0 0;
	padding: 12px 24px;
}

gravity-forms-notification-popup.php

<?php
//* Gravity Forms notification popup instead of the page redirect or AJAX notification
//* @link https://anythinggraphic.net/gravity-forms-notification-popup

/* Override the default Gravity Forms confirmation behavior, displaying it in a popup. Remember to style the divs.
----------------------------------------------------------------------------------------*/
add_filter( 'gform_confirmation', 'ag_custom_confirmation', 10, 4 );
function ag_custom_confirmation( $confirmation, $form, $entry, $ajax ) {
	add_filter( 'genesis_after_footer', 'ag_overlay');
	return '<div id="gform-notification">' . $confirmation . '<a class="button" href="#">OK</a></div>';
}

/* Add script to remove the overlay and confirmation message once the button in the popup is clicked.
----------------------------------------------------------------------------------------*/
function ag_overlay() {
	echo '<div id="overlay"></div>';
	echo '
		<script type="text/javascript">
			jQuery("body").addClass("message-sent");
			jQuery("#gform-notification a").click(function() {
				jQuery("#overlay,#gform-notification").fadeOut("normal", function() {
					$(this).remove();
				});
			});
		</script>
	';
}

Where do we need to add this php file and the css?

I've tried to implement this code on my Avada wordpress website, but it doesn't work as expected. The confirmation pop up shows, but the overlay doesn't. Also the OK button doesn't work as expected. It looks like the ag_overlay function doesn't run. I've already changed the hook value in the filter to wp_footer. But still no success. Any recommendations?