Все для веб-дизайнера
Проверка возраста при входе на сайт на jQuery
Иногда необходимо ограничить пользователя по возрасту при входе на сайт, зачастую это формальность, и юные пользователи запрещенных сайтов клубнички хитрят, но законом предусмотрено, что нужно запретить доступ к таким сайтам пользователям не достигших 18, а порой и 21 года. Я лично сталкивался с необходимостью создания такого окна, а именно для сайта магазина алкоголя. И тогда мне приходилось делать такое окно ведь хороших готовых решений я тогда не нашел. Сегодня я покажу, как можно создать такое окно с помощью плагина jQuery.
Age Check-это простой плагин jQuery, который создает небольшое модальное окно с необходимостью указать дату рождения для проверки возраста при входе на определенную станицу. Плагин использует API для хранения сеансов если пользователь прошел проверку. Интересные готовые шаблоны от наших партнеров, есть и бесплатные:
Шаг 1. HTML
Для начала нам необходимо загрузить библиотеку jQuery и JS & CSS плагина jQuery age check на нашу веб-страницу.
|
1 2 3 |
<script src="/jquery.min.js"></script> <link href="agecheck.css" rel="stylesheet"> <script src="jquery.agecheck.min.js"></script> |
Так как функционал плагина будет минимальный, то и материалов по его работе и подключению не так уж и много, движемся дальше.
Шаг 2. JS
После того как плагин вы подключили к станице его нужно вызвать, чтобы при входе на сайт посетители видели такое окно. Для этого будет следующее правило:
|
1 2 3 |
$.ageCheck({ // Опции плагина будут здесь }); |
Сами опции которые отображаются в модальном окне у нас будут следующие:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function ($) { $.ageCheck = function (options) { const settings = $.extend({ minAge: 21, redirectTo: '', redirectOnFail: '', title: 'Проверка возраста', copy: 'Этот сайт только для тех, кому исполнилось [21] год или старше. Пожалуйста, введите дату своего рождения в поля ниже, чтобы продолжить:', successMsg: { header: 'Успешно!', body: 'Теперь вы будете перенаправлены обратно на сайт...' }, underAgeMsg: 'Извините, вы недостаточно стары для просмотра этого сайта...', errorMsg: { invalidDay: 'День неверный или пуста форма', invalidYear: 'Год неверный или пуста форма' } }, options); }) |
С одной стороны это простой маленький плагин, а с другой это уже готовое решение, которое вы можете легко стилизировать и использовать на вашем сайте.
Вот и все. Готово!
Интересно:
| Опубликовал admin 25.06.2018 в 12:27, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...