Нужно быстро сделать какое-нибудь действие на сайте, чтобы записать его в куки и запомнить на этом устройстве. Это допустим всплывающее окошко, которое предупреждает о чём-то и после его закрытия не появляется еще долго.
На выручку пришел сайт https://codernote.ru/jquery/rabota-s-cookies-na-jquery/ на нем подробно описано как это реализовать.
Я же реализовал так:
Скачал файл с github.com
Подключил его, при условии, что библиотека jQuery подключена.
|
1 |
<script type="text/javascript" src="https://elmagaz.ru/js/jquery.cookie.js"></script> |
На странице, где мне нужна была появляющаяся подсказка добавил код с блоком:
|
1 2 3 4 5 6 7 |
<div class="mobile_hand_scrolle_table"> <div class="popup_hand"> <img src="/img/hand_scrolle.png"> <p>двигайте таблицу чтобы увидеть целиком</p> <span>понятно</span> </div> </div> |
Прописал скрипт, который проверяет определена ли кука и если нет, до добавляет класс к блоку «mobile_hand_scrolle_table» .show_popup при нажатии на это окно, класс .show_popup удаляется, и в куки записывается переменная show_scroll_table=yes и в последствии это окно будет скрыто по истечении 365 дней.
|
1 |
mobile_hand_scrolle_table |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script type="text/javascript"> if ( jQuery.cookie('show_scroll_table') == null ) { jQuery('.mobile_hand_scrolle_table').addClass('show_popup'); } else { jQuery('.mobile_hand_scrolle_table').removeClass('show_popup'); } jQuery('.mobile_hand_scrolle_table .popup_hand').on('click', function(e){ e.preventDefault(); jQuery('.mobile_hand_scrolle_table').removeClass('show_popup'); jQuery.cookie('show_scroll_table', 'yes', { expires: 365, path: '/' }); }); </script> |
Где expires: 365 - это количество дней жизни переменной,
path: '/' — это для всех страниц сайта установлена кука, можно прописывать конкретный адрес.
А также прописываю стили для блока, чтобы он по умолчанию появлялся, а когда мы по нему кликнули, то скрывался. Конкретно в этом варианте, он появляется один раз только на мобильных устройствах.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
.mobile_hand_scrolle_table { display:none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(2, 2, 2, 0.55); justify-content: center; align-items: flex-start; } .mobile_hand_scrolle_table .popup_hand { display: inline-flex; padding: 20px; flex-direction: column; justify-content: center; align-items: center; gap: 12px; margin:105px 0 0 0; border-radius: 9px; background: rgba(255, 255, 255, 0.82); width: 190px; } .mobile_hand_scrolle_table .popup_hand img { width: 53px; height: 53px; } .mobile_hand_scrolle_table .popup_hand p { color: #000; text-align: center; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } .mobile_hand_scrolle_table .popup_hand span { display: flex; padding: 10px 30px; align-items: flex-start; gap: 10px; border-radius: 8px; background: #FFF; color: #000; text-align: center; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; } @media only screen and (max-width: 768px) { .mobile_hand_scrolle_table.show_popup { display: flex; } } |
