Create a Popup Notification Banner

Great for notifications and warnings!

Info from
https://generatetweaks.ogal.dev/create-a-popup-notification-banner-with-generatepress-generateblocks/

Create a new Element

Popup Notification Banner
Block-Hook

Element Type: Hook
Hook name: before_footer
generate_before_footer

Add CSS to style.css of the Child theme

.banner {
	position: fixed;
	bottom: 0;
	right: 0;
	transform: translatey(100vh);
	animation: banner-fade-in 1s 1s ease-in forwards; 
}

.close-btn {
	position: absolute;
	top: 12px;
	right: 12px;
}

@keyframes banner-fade-in {
	0%{
		transform: translatey(100vh);
	}
	100%{
		transform: translatey(0);
	}
}

.hide-me{
	display: none;
}

Add JS to display the close button (X)

Create a new Element > Hook > wp_footer
Dismiss Banner

<script>
	document.addEventListener('DOMContentLoaded', function() {
            var closeButton = document.querySelector('.close-btn');
            var banner = document.querySelector('.banner');

            // Check if sessionStorage has the 'bannerHidden' key and if its value is 'true'
            if (sessionStorage.getItem('bannerHidden') === 'true') {
                banner.classList.add('hide-me');
            }

            closeButton.addEventListener('click', function(event) {
                event.preventDefault(); // Prevent the default link click action
                banner.classList.add('hide-me');
                sessionStorage.setItem('bannerHidden', 'true');
            });
        });
</script>