ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Модальное окно предупреждения 18+ на jQuery

Модальное окно предупреждения 18+ на jQuery

Модальное окно предупреждения 18+ на jQuery
В статье представлен материал, который идет под модальное окно для подтверждения возраста гостей и пользователей на jQuery для подтверждения. В сети интернет очень много тематических площадок, где есть возрастной цензор, и здесь по закону нужно подтверждение. А точнее с вашей стороны должно производиться данное ознакомление, виде того, где проверяется проверка возраста. Оно появляется автоматически, как только вы открываете сайт или страницу с материалом.

Это делается для того, что с вашей стороны все законно, ведь вы изначально предупредили тех пользователей, которые попали на данную тема. В данном модальном окне мы наблюдаем написанную информацию о содержимом на портале или отдельной страницы. Суть в том, что вы сами даете добро или отказываетесь, это уже ваш выбор, со стороны администрации сайта должно быть обязательно показано данное предупреждение. Где он по сути выполнил то, что ему требовалось, это изначальное предупреждение, виде возрастного цензора.

Это окно создано на jQuery, которое позволяет использовать возрастное окно абсолютно на любом сайте. Ведь в данном модальном окне задействован jQuery-плагин Arcticmodal, который находится в закрепленном архиве.

При появление окна, так будет выглядеть:

Модальное окно для подтверждения возраста

Что по установке, то здесь нужно подключить cookie от Яндекса, чтобы проверять, заходил к нам пользователь или нет.

Установка:

Далее идет html и стилистика данного всплывающего окна, где аналогично вы самостоятельно можете отредактировать под дизайн своего сайта.

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;
}

JS

Код
<!-- 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>

Рассматривая работоспособность, то модальное окно, которое требует подтверждение вашего возрастного цензора, то оно создано в этом году, что можно с уверенностью сказать, что идет в рабочем режиме. Также демонстрация будет производится с источника, где сам дизайн закреплен в материале.

Источник: wordsmall.ru
Демонстрация
27 Августа 2021 Загрузок: 12 Просмотров: 3694 Комментариев: (21)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 21
Kosten
Kosten 27 Августа 2021 01:501
0
Проверял его на одном известном онлайн-компиляторе codepen.io, так только око показывает, но функции не работают, возможно из-за того, что у ссылки нет сертификата, что от источника пришлось демонстрацию выставлять.

Посмотреть на codepen.io - https://codepen.io/kocsten/pen/ExXjwOa
Grician
Grician 16 Февраля 2022 11:402
0
объясните, что куда пихать. Что то у меня не высвечивается окно. JS куда копировать?
Kosten
Kosten 16 Февраля 2022 15:543
0
Давайте пихать будем в другом месте.))) А по теме, стили в CSS, код по месту, где хотите видеть HTML, а JS можно в низ сайта, чтоб на всем сайте показывало, или ниже кода HTML.

А вот по cookeie от яндекс, здесь реально могу что то не то сказать, лучше кто в теме, отпишите плиз.
-SAM-
-SAM- 17 Февраля 2022 02:254
0
Ставить перед </head>. Порядок скриптов в материале указан (как и можно посмотреть в демо, то есть открыть его и в браузере нажать CTRL+U - на будущее). Ну и, если сайт uCoz, то jquery-1.10.2.js не нужно подключать к странице (библиотека системной и так прописывается в исходный код).

UPD.: Grician, не может сайт грузиться перестать после установки. Он мог перестать грузиться из-за проблем на стороне хостинга (на том сервере, где у вас сайт). В общем, нормально поставить нужно.
Grician
Grician 17 Февраля 2022 11:505
0
После установки сайт вообще перестал грузиться. Есть еще какие-нибудь варианты модального окна с подтверждением возраста?
Сопрано
Сопрано 17 Февраля 2022 18:156
0
После установки CSS нужно историю у браузера почистить, а потом смотреть, работает или нет это окно.
Grician
Grician 18 Февраля 2022 04:357
0
Да это понятно.
Kosten
Kosten 23 Февраля 2022 23:028
0
Вы сделали, так как этот материал не с юковского сайта, и точно не могу сказать, вообще на конструктор подойдет или нет, просто по фану интересный материал, потому и разместил.
AlenDelonUFA
AlenDelonUFA 20 Октября 2023 05:0610
0
По фану не надо, люди интересуются хорошим красивым материалом для ucoz
Kosten
Kosten 20 Октября 2023 06:3511
0
А что где то для юкоз есть новый материал, мне лет 5 не встречался, так как HTML + CSS можно и на юкоз поставить. Те же модальные окна, что она с добавлением идут для юкоз, нет.

И по этому материалу, его также можно поставить на сайт конструктора, здесь нет каких то левых операторов, значит подойдет для юкоз.
AlenDelonUFA
AlenDelonUFA 20 Октября 2023 22:1212
0
Нашел лучше вариант, красиво и всё работает
Kosten
Kosten 21 Октября 2023 14:2413
0
Это нормально - хохотните с пользовать поделится.. то можете разместить здесь.
AlenDelonUFA
AlenDelonUFA 22 Октября 2023 22:3618
0
Могу ссылкой поделится, а также писал в тех поддержку Ucoz там мне ещё 1 вариант предложили, но его я не проверял
Могу на почту вам отправить, ссылку тут не отправляю так как обычно в правилах запрещены ссылки, в правила этого сайта не вчитывался

Могу Код сюда отправить, CSS HTML JS
Там правда тоже ссылки в коде есть..
Kosten
Kosten 23 Октября 2023 01:4819
0
Да, что такое, все секретное))) Но можете в ЛС отправить, нужно потом проверить на работоспособность.
AlenDelonUFA
AlenDelonUFA 23 Октября 2023 02:2120
0
Отправил в личку
Kosten
Kosten 23 Октября 2023 03:0721
0
Да, благодарю, остается время выбрать и изучить, что давно не делал.
noavatar
Бонусы 27 Января 2023 06:409
0
Все здесь нормально работает.
iano1
iano1 21 Октября 2023 19:4814
0
Если вы хотите это установить, напишите мне в личку.
------------
Kosten
Kosten 21 Октября 2023 20:4815
0
Спасибо, не не нужно, контента такого нет, за пользователя спрашивал.
-SAM-
-SAM- 22 Октября 2023 00:1916
+2
iano1, по сути можно в этом материале дописать еще один вариант css-стилизации (выложить для всех), чтобы внешне окно стало таким, как на вашем скриншоте.

Кстати, у кого на сайтах системы uCoz есть adult-содержимое, то установка (сразу перед </head> или сразу после <body>) следующего скрипта предотвратит блокировку:
Код
<script async src="https://warning.ucoz.ru/Y18warning.js" onerror="this.onerror=null;this.src='//u.to/cI8QIA'"></script>
Скрипт потом делает уведомление на всю страницу, а подтверждение пользователем храниться на куках (библиотеку отдельно не нужно подключать).
Kosten
Kosten 22 Октября 2023 18:1517
0
На всякий случай файл закинул, где архив по Русскому названию идет.
avatar