Содержание
Возрастная заглушка 18+ нужна на сайтах, где размещён контент только для взрослых. В системе uCoz подобного механизма нет, поэтому его создают вручную через HTML, CSS и JavaScript. Готовый скрипт показывает модальное окно с подтверждением возраста, блокирует доступ несовершеннолетним и запоминает выбор через cookie.
Что делает скрипт
- показывает окно при первом посещении сайта
- размывает фон и отключает взаимодействие с содержимым
- предлагает выбор «Мне есть 18» и «Мне нет 18»
- сохраняет подтверждение возраста в cookie
- скрывает окно при следующих посещениях
- перенаправляет несовершеннолетних на указанную страницу
- работает на всех страницах и во всех модулях uCoz
Принцип работы
- скрипт проверяет cookie age_verified_18
- если значение не найдено, выводится окно
- выбор «Мне есть 18» создаёт cookie и снимает блокировку
- выбор «Мне нет 18» выполняет переход по указанному адресу
- срок действия cookie можно изменить
Полный код заглушки 18+
Код вставляется полностью и включает HTML, стили и JavaScript:
<!-- Заглушка 18+ -->
<div class="age-gate-overlay" id="ageGate">
<div class="age-gate-modal">
<div class="age-gate-title">Сайт доступен только для взрослых</div>
<div class="age-gate-text">
На сайте размещён контент категории 18+.
Продолжая просмотр, вы подтверждаете достижение 18 лет
и принимаете ответственность за дальнейшее посещение ресурса.
</div>
<div class="age-gate-buttons">
<button type="button" class="age-gate-btn age-gate-btn-yes" id="ageGateYes">
Мне есть 18
</button>
<button type="button" class="age-gate-btn age-gate-btn-no" id="ageGateNo">
Мне нет 18
</button>
</div>
<div class="age-gate-note">
Если вам нет 18 лет, покиньте страницу.
</div>
</div>
</div>
<style>
body.age-gate-blur > *:not(#ageGate) {
filter: blur(8px);
pointer-events: none;
user-select: none;
transition: filter 0.3s ease;
}
.age-gate-overlay {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(3px);
z-index: 99999;
padding: 1rem;
}
.age-gate-modal {
max-width: 480px;
width: 100%;
background: var(--bs-body-bg, #121212);
color: var(--bs-body-color, #f8f9fa);
border-radius: 1rem;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
padding: 2rem 1.75rem 1.5rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
animation: ageFade 0.25s ease;
}
@keyframes ageFade {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.age-gate-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1rem;
text-align: center;
}
.age-gate-text {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.age-gate-buttons {
display: flex;
gap: 0.75rem;
justify-content: center;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.age-gate-btn {
cursor: pointer;
border: none;
border-radius: 999px;
padding: 0.65rem 1.4rem;
font-size: 0.95rem;
font-weight: 600;
transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
min-width: 150px;
}
.age-gate-btn-yes {
background: #0d6efd;
color: #ffffff;
box-shadow: 0 6px 18px rgba(13, 110, 253, 0.5);
}
.age-gate-btn-yes:hover {
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(13, 110, 253, 0.65);
}
.age-gate-btn-no {
background: transparent;
color: #f8f9fa;
border: 1px solid rgba(248, 249, 250, 0.4);
}
.age-gate-btn-no:hover {
background: rgba(248, 249, 250, 0.08);
}
.age-gate-note {
font-size: 0.8rem;
color: #adb5bd;
text-align: center;
}
body.age-gate-lock {
overflow: hidden;
}
</style>
<script>
(function () {
var AGE_COOKIE_NAME = "age_verified_18";
var AGE_COOKIE_VALUE = "1";
var AGE_COOKIE_MAX_AGE = 86400;
var REDIRECT_URL_UNDER_18 = "https://yandex.ru";
function getCookie(name) {
var matches = document.cookie.match(
new RegExp("(^|; )" + name.replace(/([.$?*|{}()[\\]\\/+\^])/g, "\\$1") + "=([^;]*)")
);
return matches ? decodeURIComponent(matches[2]) : null;
}
function setCookie(name, value, maxAge) {
document.cookie =
encodeURIComponent(name) +
"=" +
encodeURIComponent(value) +
"; max-age=" +
maxAge +
"; path=/";
}
function showAgeGate() {
var gate = document.getElementById("ageGate");
var yesBtn = document.getElementById("ageGateYes");
var noBtn = document.getElementById("ageGateNo");
gate.style.display = "flex";
document.body.classList.add("age-gate-blur", "age-gate-lock");
yesBtn.addEventListener("click", function () {
setCookie(AGE_COOKIE_NAME, AGE_COOKIE_VALUE, AGE_COOKIE_MAX_AGE);
gate.style.display = "none";
document.body.classList.remove("age-gate-blur", "age-gate-lock");
});
noBtn.addEventListener("click", function () {
window.location.href = REDIRECT_URL_UNDER_18;
});
}
document.addEventListener("DOMContentLoaded", function () {
if (getCookie(AGE_COOKIE_NAME) === AGE_COOKIE_VALUE) {
return;
}
showAgeGate();
});
})();
</script>
Куда вставлять код на uCoz
Лучшее и наиболее универсальное место:
Глобальные блоки → Нижняя часть сайта
Так заглушка подключается:
- на всех страницах
- после загрузки основного контента
- без конфликтов с модульными шаблонами
- без влияния на скорость рендера
Альтернативный вариант:
Глобальные блоки → Верхняя часть сайта
Используется, если нужно показать окно максимально рано.
Настройки в коде
Срок действия cookie
var AGE_COOKIE_MAX_AGE = 86400;
Можно увеличить, умножив значение на нужное количество дней.
Ссылка для несовершеннолетних
var REDIRECT_URL_UNDER_18 = "https://yandex.ru";
Можно указать любую страницу.
Для каких сайтов подходит
- проекты с контентом 18+
- магазины товаров для взрослых
- сайты с алкоголем или табачной продукцией
- разделы с медицинской или чувствительной информацией
- страницы, на которые нужно ограничить доступ по возрасту
Заключение
Заглушка 18+ — простой и надёжный способ ограничить доступ к взрослому контенту на сайте uCoz. Скрипт не требует доработок системы, работает во всех модулях и легко настраивается под конкретные задачи. Достаточно вставить готовый код в глобальный блок и при необходимости изменить срок действия cookie или страницу перенаправления. Такой подход обеспечивает базовую защиту и улучшает соблюдение возрастных требований на сайте.
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Комментарии