Lightweight Age & Disclaimer Gate (JS Overlay)
Lightweight, front-end age & disclaimer gate you can drop onto any page.
It shows a centered overlay asking visitors to confirm they’re of age and that
they accept your disclaimer before viewing the content. Once they accept, it
remembers their choice in localStorage (with a simple cookie fallback).
What this does
- Shows a full-page overlay with a short warning/disclaimer.
- Asks visitors to confirm they are over your chosen age (default: 18+).
- Stores consent in
localStorage(and a basic cookie backup). - Respects returning visitors and won’t nag on every page load.
- “Leave” button can send them anywhere you want (homepage, search engine, etc.).
What this does not do
- It does not provide real age verification.
- It does not make your site legally compliant by itself.
- It does not replace your own legal advice or privacy policy.
Think of this as a tiny “cover your ass a little more” layer in front of your content, not a full compliance solution.
How to use it
- Copy the code below.
- Paste it just before the closing
</body>tag of any page you want to protect. - Customize the text and settings at the top of the script to match your site.
Code (paste before </body>)
<!-- VibeScriptz: Lightweight Age & Disclaimer Gate -->
<script>
(function () {
var CONFIG = {
minAge: 18, // Change if you need 21+ etc.
siteLabel: "this site", // Appears in the message text
storageKey: "vs_age_gate_accept", // localStorage key
expireDays: 30, // Cookie backup expiration
redirectUrl: "https://www.google.com" // Where to send users who click "Leave"
};
// --- helpers --------------------------------------------------------------
function daysToMs(days) {
return days * 24 * 60 * 60 * 1000;
}
function hasAccepted() {
try {
if (window.localStorage) {
if (localStorage.getItem(CONFIG.storageKey) === "1") return true;
}
} catch (e) {}
// simple cookie fallback
var m = document.cookie.match(new RegExp(
"(?:^|; )" + CONFIG.storageKey.replace(/([.*+?^${}()|[\]\\])/g, "\\$1") + "=([^;]*)"
));
return !!(m && m[1] === "1");
}
function setAccepted() {
try {
if (window.localStorage) {
localStorage.setItem(CONFIG.storageKey, "1");
}
} catch (e) {}
var expires = "";
if (CONFIG.expireDays && CONFIG.expireDays > 0) {
var d = new Date();
d.setTime(d.getTime() + daysToMs(CONFIG.expireDays));
expires = "; expires=" + d.toUTCString();
}
document.cookie = CONFIG.storageKey + "=1" + expires + "; path=/; SameSite=Lax";
}
// --- build overlay --------------------------------------------------------
function buildGate() {
var overlay = document.createElement("div");
overlay.setAttribute("id", "vs-age-gate-overlay");
overlay.style.position = "fixed";
overlay.style.inset = "0";
overlay.style.zIndex = "999999";
overlay.style.background = "rgba(0, 0, 0, 0.75)";
overlay.style.display = "flex";
overlay.style.alignItems = "center";
overlay.style.justifyContent = "center";
overlay.style.padding = "16px";
var box = document.createElement("div");
box.style.maxWidth = "420px";
box.style.width = "100%";
box.style.background = "#F9FAFF";
box.style.border = "1px solid #C4C6F5";
box.style.borderRadius = "6px";
box.style.boxShadow = "0 6px 18px rgba(0, 0, 0, 0.35)";
box.style.fontFamily = "'Courier New', Courier, monospace";
box.style.color = "#000";
box.style.padding = "16px";
var title = document.createElement("div");
title.style.fontWeight = "bold";
title.style.marginBottom = "8px";
title.textContent = "Age & Disclaimer Check";
var msg = document.createElement("p");
msg.style.margin = "0 0 12px";
msg.style.fontSize = "14px";
msg.innerHTML =
"By entering, you confirm that you are at least " +
CONFIG.minAge +
" years old and that you understand " +
CONFIG.siteLabel +
" may contain content not suitable for minors.";
var extra = document.createElement("p");
extra.style.margin = "0 0 14px";
extra.style.fontSize = "12px";
extra.style.color = "#555";
extra.innerHTML =
"You also agree that you are responsible for complying with any " +
"laws, rules, or policies that apply in your location.";
var btnRow = document.createElement("div");
btnRow.style.display = "flex";
btnRow.style.justifyContent = "flex-end";
btnRow.style.gap = "8px";
var leaveBtn = document.createElement("button");
leaveBtn.type = "button";
leaveBtn.textContent = "Leave";
leaveBtn.style.padding = "6px 12px";
leaveBtn.style.fontFamily = "inherit";
leaveBtn.style.fontSize = "13px";
leaveBtn.style.border = "1px solid #999";
leaveBtn.style.background = "#eee";
leaveBtn.style.cursor = "pointer";
var enterBtn = document.createElement("button");
enterBtn.type = "button";
enterBtn.textContent = "I am " + CONFIG.minAge + "+ — Enter";
enterBtn.style.padding = "6px 12px";
enterBtn.style.fontFamily = "inherit";
enterBtn.style.fontSize = "13px";
enterBtn.style.border = "1px solid #A829A7";
enterBtn.style.background = "#A829A7";
enterBtn.style.color = "#fff";
enterBtn.style.cursor = "pointer";
leaveBtn.addEventListener("click", function () {
if (CONFIG.redirectUrl) {
window.location.href = CONFIG.redirectUrl;
} else {
window.location.href = "https://www.google.com";
}
});
enterBtn.addEventListener("click", function () {
setAccepted();
if (overlay.parentNode) {
overlay.parentNode.removeChild(overlay);
}
});
btnRow.appendChild(leaveBtn);
btnRow.appendChild(enterBtn);
box.appendChild(title);
box.appendChild(msg);
box.appendChild(extra);
box.appendChild(btnRow);
overlay.appendChild(box);
document.body.appendChild(overlay);
}
// --- init -----------------------------------------------------------------
function init() {
if (hasAccepted()) return;
buildGate();
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();
</script>
Configuration cheatsheet
minAge— text-only; this doesn’t enforce anything, it just changes the wording.siteLabel— short phrase like"this site"or your domain name.storageKey— change if you want a different key or to run multiple gates.expireDays— how long to remember consent in the cookie fallback.redirectUrl— where to send visitors who click “Leave”.
Reminder: this is only a thin UI layer. It does not verify age, and it does not guarantee legal compliance. Talk to a lawyer if your content or jurisdiction demands real age verification or specific wording.