<div id="ageModal" class="age-overlay">
  <div class="age-box">
    <h2>Age Verification</h2>
    <p>You must be 18 years or older to enter this site.</p>
    <div class="actions">
      <button class="btn-no" onclick="exitSite()">I am under 18</button>
      <button class="btn-yes" onclick="enterSite()">I am 18+</button>
    </div>
  </div>
</div>
<div class="site-content">
  <h1>Welcome to the Site</h1>
  <p>Content visible only to verified users.</p>
  <button onclick="resetAge()">Reset Verification</button>
</div>

.age-overlay {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.age-box {
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  text-align: center;
  max-width: 400px;
}
.age-box h2 {
  margin-top: 0;
  color: #1f2937;
}
.age-box p {
  color: #4b5563;
  margin-bottom: 30px;
}
.actions {
  display: flex;
  gap: 15px;
  justify-content: center;
}
button {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.btn-yes {
  background: #2563eb;
  color: white;
}
.btn-no {
  background: #f3f4f6;
  color: #374151;
}
.site-content {
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
}

const modal = document.getElementById("ageModal");

// Check if already verified
if (localStorage.getItem("ageVerified") === "true") {
  modal.style.display = "none";
}

function enterSite() {
  localStorage.setItem("ageVerified", "true");
  modal.style.display = "none";
}

function exitSite() {
  alert("You are not allowed to enter.");
  // Redirect logic would go here
  // window.location.href = "https://google.com";
}

function resetAge() {
  localStorage.removeItem("ageVerified");
  location.reload();
}

Back to Snippets

Age Verification Modal JS

Ensure your visitors are old enough with this compliance modal. It blocks access to the page until the user confirms their age, and we use local storage to remember their choice for their next visit.

381

#javascript

#css

#modal

#age verification

#popup

#overlay

#cookie

/HTML *CSS ()JS Output Live Updates

Age Verification Modal JS

Share Code Snippet