Age verification pop-up using HTML/CSS/JS

I needed to add an age verification popup for a website I designed for a local brewery. The website was recently launched and the business was busy with new customers and they asked me to get some sort of verification on their website quickly. This is the simple code I used to get this up and running within an hour.

First I wrote out the HTML for the Popup:

<div id="popup-container">
    <div id="overlay">
        <div id="popup">
	    <h2>Are you 21 or older?</h2>
	    <button id="yesBtn">Yes</button>
	    <button id="noBtn">No</button>
	</div>
    </div>
</div>

Then I styled the components to match the look of the website.

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
}
#popup {
    background-color: #84884d;
    color: white;
    font-size: 13pt;
    text-align: center;
    padding: 25px;
    position: relative;
    top: 10px;
    width: 700px;
    max-width: 80%;
    margin: 0 auto;
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
#popup p {
    margin-top: 0;
    color: #fff;
    font-size: 24pt;
    display: block;
    margin-bottom: 1em;
}
#popup button {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
    color: #84844d;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    -webkit-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.8);
    box-shadow: 1px 2px 9px 0px rgba(0,0,0,0.8);
    font-family: "Source Sans Pro", sans-serif;
    background-color: white;
    border: none;
    font-size: 16pt;  
    display: inline-block;
    width: 150px;
}
#verifyBtn {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #cc3535;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
}
#verifyBtn:hover,
#popup button:hover {
    background-color: #67553e;
    color: #fff;
}
#overlay.show {
	display: block;
}
#popup-container {
  display: none;
}
@media only scress and (max-width:600px){
  #popup-container {
    width: 90%;
    height: 80%;
  }
  #popup h2 {
    margin-top: 0;
    color: #fff;
    font-size: 16px;
  }
  #verifyBtn {
    margin-top: 20px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #cc3535;
    color: #fff;
    cursor: pointer;
    font-size: 10px;
    font-weight: 400;
  }
}

And finally the JavaScript. I wanted the website to remember the user selection so it was not asking over and over on every page load. The js stores a simple cookie on the users browser to keep track of the answer.

const overlay = document.getElementById("overlay");
const popup = document.getElementById("popup");
const verifyBtn = document.getElementById("verifyBtn");
const yesBtn = document.getElementById("yesBtn");
const noBtn = document.getElementById("noBtn");

const popupContainer = document.getElementById("popup-container");
popupContainer.style.display = "block";

yesBtn.addEventListener("click", function() {
	overlay.classList.remove("show");
	alert("Thank You, Enjoy.");
});

noBtn.addEventListener("click", function() {
	overlay.classList.remove("show");
	alert("You must be over 18 years old to enter the site.");
});
function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

const hasSeenPopup = getCookie("seen_popup");

if (!hasSeenPopup) {
  const overlay = document.getElementById("overlay");
  overlay.classList.add("show");


    // Set a cookie to remember that the visitor has seen the popup
    const date = new Date();
    date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
    const expires = "expires=" + date.toUTCString();
    document.cookie = "seen_popup=true;" + expires + ";path=/";
  
}

To see this form in action visit Sugar Run Brewing Company 

Snag this form's code on my GitHub