Для чего нужна эта пресловутая «полоска cookie»? Очень просто. Она требуется законодательством, и человек, заходя впервые на сайт, должен знать, что тут используются какие-либо его данные, и они хранятся в cookie. Это своеобразное предупреждение.
Так вот, сейчас я покажу, как такую полоску сделать)
HTML
<div class="bottom__cookie-block">
<p>Продолжая использовать сайт, вы соглашаетесь на сбор файлов cookie</p>
<a href="javascript:void(0);" class="ok">Ок</a>
<a href="#" class="podr">Подробнее</a>
</div>
Такой вот простой блок. Первая ссылка просто закрывает его, вторая (необязательно) может вести, например, на политику конфеденциальности, которая пояснит, зачем вообще эта полоса)
CSS (Sass)
В стилях все еще проще, обычный блок с position: fixed.
.bottom__cookie-block {
width: 100%;
height: 48px;
background-color: #ffffff;
display: none;
position: fixed;
bottom: 0;
z-index: 100000;
text-align: center;
-webkit-transform: translateZ(0);
}
Небольшое уточнение по поводу translateZ(0). В процессе создания данной полосы я сталкивался с проблемой, что именно на хроме при скролле сайта эта полоса прыгает. Данное свойство фиксит эту проблему.
Итак, у нас есть сама полоса, теперь пора ее «оживить».
Подключаем cookie.js (будет приложен к посту)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.cookie.js"></script>
$(function() {
// Проверяем запись в куках о посещении
// Если запись есть - ничего не происходит
if (!$.cookie('hideModal')) {
// если cookie не установлено появится окно
// с задержкой 5 секунд
var delay_popup = 1000;
setTimeout("document.querySelector('.bottom__cookie-block').style.display='inline-block'", delay_popup);
}
$.cookie('hideModal', true, {
// Время хранения cookie в днях
expires: 30,
path: '/'
});
});
// Закрытие полосы cookie
$('.ok').click(function(){
$('.bottom__cookie-block').fadeOut();
});
Как видим, через setTimeout запускается показ нашей полосы. переменная expires отвечает за кол-во дней использования cookie. Остальное в общем-то знать не нужно. А внизу просто закрытие полосы по нажатию на ссылку с классом ok.
ссылка на скачивание cookie.js.
Оригинальная статья на: https://blog.maxgraph.ru/2018/02/13/sozdanie-cookie-preduprezhdeniya/
Подписывайтесь в блог (через форму на сайте) и получите полезные ссылки для верстальщика!