Create a Popup Notification Banner

Great for notifications and warnings!


.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 {
		transform: translatey(100vh);
		transform: translatey(0);

	display: none;


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') {

            closeButton.addEventListener('click', function(event) {
                event.preventDefault(); // Prevent the default link click action
                sessionStorage.setItem('bannerHidden', 'true');

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

1 thought on “Create a Popup Notification Banner”

Leave a Comment