About this snippet

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.

Size
1.9 KB
Uses
HTML, CSS, JavaScript
Loads
Nothing external
Views
465

Collections

Related snippets

<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();
}
Esc
↑↓ moveEnter select

Start from a template

Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

Share

Source





  
Keyboard shortcuts

  




  

    
Save