Setting localStorage to Control Pop-ups

I added a simple pop-up to every page of a website but I didn’t want to bother visitors who had already seen it, so I used localStorage to prevent the pop-up from showing again if people closed the pop-up.

Good to know:

There is no expiration date on this, so the pop-up won’t show again until localStorage is cleared. Some people have their browsers clear localStorage automatically every time they close their browser, some people rarely if ever clear their localStorage, so the effectiveness of this technique may vary.

The code:

The HTML is very simple:

<div class="modal">
    <div class="modal-content">
        <p>Content of the popup</p>
        <button type="button" aria-label="Close Modal" class="close-modal"> Continue to site </button>
    </div>
</div>

With CSS I made the outside div of the pop-up cover the whole screen when set to display: flex with a semi-transparent background so the rest of the site is screened.

I centered the content of the pop-up in the middle of the screen and gave it an opaque background to make it the obvious focal point and the text in it easier to read.

I set the modal to display: none in the CSS and only show the pop-up when JavaScript is turned on and working.

.modal {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.75);
	bottom: 0;
	display: none;
	flex-direction: row;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
}
.modal-content {
	background-color: #FFF;
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
	width: 100%;
}

And finally the JavaScript:

<script id="modal-script">
	// Set up the vars for the modal itself and for the close button
	var modal = document.getElementsByClassName( 'modal' )[0];
	var close = document.getElementsByClassName( 'close-modal' )[0];

	// When the page loads, open the modal if 
	// it hasn't been seen yet and move focus
	// to the close button
	if( !localStorage.mypopup){
		window.onload = function() {
			modal.style.display = "flex";
			close.focus();
		}
	} 
	
	// When the user clicks the close button, 
	// close the modal and create local storage
	// to mark the popup as seen
	close.onclick = function() {
		localStorage.setItem( "mypopup", true );
		modal.style.display = "none";
	}
	// When the user clicks on the modal, 
	// close the modal and create local storage 
	// to mark the popup as seen
	window.onclick = function( event ) {
		if( event.target == modal ){
			localStorage.setItem( "mypopup", true );
			modal.style.display = "none";
		}
	}
</script>

Additional notes for who may find it interesting:

I use this method on WordPress websites when I want one simple pop-up and don’t want to install an entire pop-up plugin and all the extras it loads.

I often use GeneratePress and their Premium plugin because it’s so versatile and light, and in this case I used the GP Premium Elements option specifically, which allows me to add content anywhere on any or all pages (I added it at the bottom of the page on the entire site).

The CSS is easy to add through the customizer, and the JavaScript I added to the bottom of each page using the Code Snippets plugin.