Есть много тематик сайта, для которых возраст пользователей имеет значение. И как правило, или даже закон, требует формального подтверждения своего совершеннолетия. Обычно таким подтверждением является всплывающее окно с проверкой на возраст. Оно появляется сразу, как только пользователь заходит на сайт с ограничением по возрасту.
В таком окне написана информация о содержании сайта и вопрос о возрасте: если есть 18, нажимается одна кнопка, если нет – другая. Я о таком уже писал, только там был плагин окна с подтверждением возраста для WordPress. А в этот раз мы сделаем на jQuery, что позволит использовать окно возраста абсолютно на любом сайте.
Окно с подтверждением возраста
В качестве модельного окна я использовал jQuery-плагин Arcticmodal. Он есть в архиве или можете скачать его с сайта автора. Дальше подключаем cookie от Яндекса, чтобы проверять, заходил к нам пользователь или нет.
Ну, конечно же, html и стили самого всплывающего окна. Их можете отредактировать под дизайн своего сайта.
jQuery
<!-- jquery --> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <!-- cookie --> <script src="https://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script> <!-- modal plugin --> <script src="js/arcticmodal/jquery.arcticmodal-0.3.min.js"></script> <link rel="stylesheet" href="js/arcticmodal/jquery.arcticmodal-0.3.css"> <script> (function($) { $(function() { if (!$.cookie('was')) { $('#info_age_modal').arcticmodal({ closeOnOverlayClick: false, closeOnEsc: true }); } $('.modal_but_no').click(function() { window.location.href = 'http://www.google.ru/'; return false }); $('.modal_but_yes').click(function() { $.cookie('was', true, { expires: 5, // Сколько хранить куки в днях path: '/' }); return false }) }) })(jQuery) </script>
HTML
<div class="modal_age"> <div class="modal_age_wrap" id="info_age_modal"> <div class="modal_title">Сайт содержит материалы для взрослых</div> <div class="modal_age_text"> <span>Вам исполнилось 18 лет?</span> <p>Перейдя по ссылки вы так же подтверждаете что вам исполнилось 18 лет</p> </div> <div class="modal_age_but"> <div class="modal_but_yes arcticmodal-close">Да, мне есть 18</div> <div class="modal_but_no">Мне нет 18</div> </div> </div> </div>
CSS
/* modal */ .modal_age { display: none; } #info_age_modal { max-width: 420px; background: #fff; padding: 25px; border-radius: 5px; } .modal_title { text-align: center; color: #000; font-size: 15px; margin-bottom: 15px; } .modal_age_text { text-align: center; } .modal_age_text span{ text-transform: uppercase; font-size: 17px; font-weight: bold; color: red; margin-bottom: 10px; display: inline-block; } .modal_age_but { text-align: center; margin-top: 15px; } .modal_but_yes, .modal_but_no { display: inline-block; padding: 8px 12px; border-radius: 5px; background: #eee; cursor: pointer; }