Окно предупреждении о 18+ на DLE

[izbushkin 3]

Всем привет.

Мой сайт http://www.izbushkinet.ru/

Возможно тема уже не новая, но вот я столкнулся с такой проблемой.

Нужно было реализовать всплывающее окно с предепреждением о возрастном ограничении на сайте.

Данный хак я нашел здесь

Всё установил и залил, как рекомедовано.

Но ничего не вышло. Окна как показано на примере нет, а в левом верхнем углу сайта появляются только две строчки на белом фоне:

Да, мне уже есть 18 лет!

Нет, я младше 18 лет

Может кто потестит сей хак и подскажет, что там подправить надо, чтобы всплывало красивое окошко и чтобы оно было посередине.

Заранее спасибо.

[alex32 943]

как же можно увидеть проблему, если на вашем сайте в шаблоне нет ни одной строчки, которые там должны быть?

Дальше нужно открыть файл main.tpl вашего шаблона и перед тегом </head> вставить этот код

<script src="{THEME}/js/jquery.colorbox-min.js"></script>

<script type="text/javascript">jQuery(document).ready(function(){

if (document.cookie.indexOf('visited=true') == -1) {

var fifteenDays = 1000*60*60*24*15;

var expires = new Date((new Date()).valueOf() + fifteenDays);

document.cookie = "visited=true;expires=" + expires.toUTCString();

$.colorbox({width:"480px", inline:true, href:"#subscribe"});

}

});</script>

Потом в этом же файле, после кода {AJAX} вставляем

<div style='display:none'>

<div id='subscribe' style=' background:#fff;'>

<h2 class="box-title">Предупреждение!</h2>

<h3 class="box-tagline">

Страницы, которые вы собираетесь смотреть, могут содержать материалы, предназначенные только для взрослых. Чтобы продолжить, вы должны подтвердить, что вам уже исполнилось 18 лет.

</h3>

<div style="width:90%;padding:18px">

<div class="year18as"><a href="/">Да, мне уже есть 18 лет!</a></div>

<div class="year18s"><a href="http://www.themsland.org">Нет, я младше 18 лет</a></div>

</div>

</div>

</div>

Ничего подобного у вас в шаблоне нет Изменено 11 января 2014 пользователем alex32

[izbushkin 3]

Да снёс я все файлы и коды с сайта - некрасиво.

Поэтому и написал - что может кто потестит хак...

[samo733792 19]

Конечно, сейчас поставим на свои сайты и посмотрим.

[izbushkin 3]

Огромное спасибо alex32 - человек не поленился и сделал или "допилил" модуль до конца и сбросил мне готовый модуль в файле!!!

Просто поражаюсь таким людям, которые готовы оказать помощь просто безвозмездно и без всяких "понтов"!

Я водитель, поэтому первое, что приходит в голову, так это сравнение, что такое - большая редкость - также как и на дорогах - таких людей единицы!

[alex32 943]

izbushkin, не за что ))) http://yadi.sk/d/PYnPbidOFqUhy кому надо качайте, стили сами себе запилите

Изменено 19 января 2014 пользователем alex32

[Kirill400 0]

Отличный мод!

Есть только небольшая проблемка.

Если нажать клавишу F5 или даже если нажать "Покинуть сайт" и потом снова зайти, то сайт всё равно откроется.

Можно ли сделать так что бы при нажатии F5 окно не закрывалось, а если посетитель нажимает на кнопку "Покинуть сайт" то при следующем входе снова вылезет это окно?

Пример: http://www.baltika.ru/

Изменено 28 октября 2014 пользователем Kirill400

[doseng 6]

19.01.2014 в 03:15, alex32 сказал:

izbushkin, не за что ))) http://yadi.sk/d/PYnPbidOFqUhy кому надо качайте, стили сами себе запилите

Файла не существует к сожалению.

[celsoft 6216]

10 часов назад, doseng сказал:

Файла не существует к сожалению.

На год сообщения не догадались посмотреть?

[Bomber 7]

Готовое решение

    <style>
        .age-verification-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .age-verification-box {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            max-width: 500px;
            text-align: center;
        }
        
        .age-verification-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .age-verification-text {
            margin-bottom: 25px;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .age-verification-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .age-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .age-confirm {
            background-color: #4CAF50;
            color: white;
        }
        
        .age-deny {
            background-color: #f44336;
            color: white;
        }
        
        .age-btn:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
    </style>

    <!-- Основное содержимое сайта (изначально скрыто) -->
    <div id="content" style="display: none;">
        <h1>Добро пожаловать на наш сайт</h1>
        <p>Этот контент предназначен для лиц старше 18 лет.</p>
    </div>

    <!-- Оверлей подтверждения возраста -->
    <div id="ageVerificationOverlay" class="age-verification-overlay">
        <div class="age-verification-box">
            <h2 class="age-verification-title">Подтверждение возраста</h2>
            <p class="age-verification-text">
                Данный сайт содержит материалы, предназначенные только для лиц старше 18 лет.
                Пожалуйста, подтвердите, что вам уже исполнилось 18 лет, чтобы продолжить.
            </p>
            <div class="age-verification-buttons">
                <button id="confirmAge" class="age-btn age-confirm">Мне есть 18 лет</button>
                <button id="denyAge" class="age-btn age-deny">Мне нет 18 лет</button>
            </div>
        </div>
    </div>

    <script>
	document.addEventListener('DOMContentLoaded', function() {
    const ageVerificationOverlay = document.getElementById('ageVerificationOverlay');
    const confirmAgeBtn = document.getElementById('confirmAge');
    const denyAgeBtn = document.getElementById('denyAge');
    const content = document.getElementById('content');
    
    // Проверяем, есть ли куки с подтверждением возраста
    function checkAgeCookie() {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            const [name, value] = cookie.trim().split('=');
            if (name === 'ageVerified' && value === 'true') {
                return true;
            }
        }
        return false;
    }
    
    // Если возраст уже подтвержден, скрываем оверлей
    if (checkAgeCookie()) {
        ageVerificationOverlay.style.display = 'none';
        content.style.display = 'block';
    } else {
        ageVerificationOverlay.style.display = 'flex';
        content.style.display = 'none';
    }
    
    // Обработчик для подтверждения возраста
    confirmAgeBtn.addEventListener('click', function() {
        // Устанавливаем куки на 30 дней
        const expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 30);
        document.cookie = `ageVerified=true; expires=${expiryDate.toUTCString()}; path=/`;
        
        // Скрываем оверлей и показываем контент
        ageVerificationOverlay.style.display = 'none';
        content.style.display = 'block';
    });
    
    // Обработчик для отказа
    denyAgeBtn.addEventListener('click', function() {
        // Перенаправляем на безопасную страницу (можно изменить)
        window.location.href = 'https://www.google.com';
    });
});
	</script>

Как это работает:

При загрузке страницы скрипт проверяет наличие куки ageVerified.

Если куки нет или значение не true, показывается модальное окно подтверждения возраста.

При нажатии "Мне есть 18 лет":

Устанавливается куки ageVerified=true сроком на 30 дней

Модальное окно скрывается

Показывается основной контент сайта

При нажатии "Мне нет 18 лет" пользователь перенаправляется на Google (можно изменить на другую страницу).

При последующих посещениях сайта форма не будет показываться, если куки еще действительны.

Вариант №2

<style>
        .age-verification-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
        
        .age-verification-box {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            max-width: 500px;
            text-align: center;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
        }
        
        .age-verification-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        
        .age-verification-text {
            margin-bottom: 25px;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .age-verification-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }
        
        .age-btn {
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        
        .age-confirm {
            background-color: #4CAF50;
            color: white;
        }
        
        .age-deny {
            background-color: #f44336;
            color: white;
        }
        
        .age-btn:hover {
            opacity: 0.9;
            transform: scale(1.05);
        }
    </style>

    <!-- Оверлей подтверждения возраста (изначально скрыт) -->
    <div id="ageVerificationOverlay" class="age-verification-overlay" style="display: none;">
        <div class="age-verification-box">
            <h2 class="age-verification-title">Подтверждение возраста</h2>
            <p class="age-verification-text">
                Данный сайт содержит материалы, предназначенные только для лиц старше 18 лет.
                Пожалуйста, подтвердите, что вам уже исполнилось 18 лет, чтобы продолжить.
            </p>
            <div class="age-verification-buttons">
                <button id="confirmAge" class="age-btn age-confirm">Мне есть 18 лет</button>
                <button id="denyAge" class="age-btn age-deny">Мне нет 18 лет</button>
            </div>
        </div>
    </div>

    <script>
	document.addEventListener('DOMContentLoaded', function() {
    const ageVerificationOverlay = document.getElementById('ageVerificationOverlay');
    const confirmAgeBtn = document.getElementById('confirmAge');
    const denyAgeBtn = document.getElementById('denyAge');
    
    // Проверяем, есть ли куки с подтверждением возраста
    function checkAgeCookie() {
        const cookies = document.cookie.split(';');
        for (let cookie of cookies) {
            const [name, value] = cookie.trim().split('=');
            if (name === 'ageVerified' && value === 'true') {
                return true;
            }
        }
        return false;
    }
    
    // Если возраст не подтвержден, показываем оверлей
    if (!checkAgeCookie()) {
        ageVerificationOverlay.style.display = 'flex';
    }
    
    // Обработчик для подтверждения возраста
    confirmAgeBtn.addEventListener('click', function() {
        // Устанавливаем куки на 30 дней
        const expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 30);
        document.cookie = `ageVerified=true; expires=${expiryDate.toUTCString()}; path=/`;
        
        // Скрываем оверлей
        ageVerificationOverlay.style.display = 'none';
    });
    
    // Обработчик для отказа
    denyAgeBtn.addEventListener('click', function() {
        // Перенаправляем на безопасную страницу (можно изменить)
        window.location.href = 'https://www.google.com';
    });
});
	</script>

Основные изменения:

Размытый фон: Добавлен эффект размытия

Контент не скрывается: Основное содержимое сайта остается видимым под оверлеем

Полупрозрачный оверлей:  делает фон полупрозрачным

Оверлей поверх контента: Контент остается на месте, но оверлей блокирует взаимодействие с ним

Этот вариант более деликатный, так как пользователь сразу видит, что находится на сайте, но для доступа к контенту все равно нужно подтвердить возраст.

Изменено вчера в 13:05 пользователем Bomber