Здравствуйте, стоит задача чтобы скрывать блок раз и навсегда, допустим человек зашедший первый раз на сайт его увидел и если он нажмет на кнопку "закрыть" то чтобы это блок больше не появлялся при обновлении страницы, то есть надо заносить данные, что он скрыт в куки. Я пытался это сделать так, но не знаю вообще с чего начать правильно и чем закончить
$('.info__btn').on('click', function() {
$(this).parent().hide(200);
});
if(!Cookie().get('offer')) { $('.info').hide(); }
<div class="info">
<div class="info__btn">Закрыть</div>
</div>
Вариант с php
<script>
$('.info__btn').on('click', function() {
$('html').append("<?=$_COOKIE['info__btn']='true';?>");
});
</script>
<?if(!$_COOKIE['info__btn'])
{?>
<div class="info">
<div class="info__btn">Закрыть</div>
</div>
<?}
Вариант с js:
<div class="info" style="display:none">
<div class="info__btn">Закрыть</div>
</div>
<script>
$(document).ready(function(){
if(!$.cookie('info__btn'))$('.info').show();
$('.info__btn').on('click', function() {
$.cookie('info__btn', 'true');
});
})
</script>
<script type="text/javascript" src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js" ></script>
// Собственно сама функция которая работает с Cookie'сами
const Cookie = {
get: function( name ) {
var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
return matches ? decodeURIComponent(matches[1]) : undefined;
},
set: function( name, value, options ) {
options = options || {};
var expires = options.expires;
if (typeof expires == "number" && expires) {
var d = new Date();
d.setTime(d.getTime() + expires * 1000);
expires = options.expires = d;
}
if (expires && expires.toUTCString) {
options.expires = expires.toUTCString();
}
value = encodeURIComponent(value);
var updatedCookie = name + "=" + value;
for (var propName in options) {
updatedCookie += "; " + propName;
var propValue = options[propName];
if (propValue !== true) {
updatedCookie += "=" + propValue;
}
}
document.cookie = updatedCookie;
return null;
},
delete: function( name ) {
Cookie().set(name, '', {expires: -1});
return null;
}
};
// Наш обработчик всего этого безобразия (хотя лучше бы на беке делать)
$(() => {
const $info = $('.info'),
$infoButton = $info.find('.info__btn');
/*
* Проверяем есть ли в куках то что нам нужно
*/
if(Cookie.get('offer') !== 'accept') {
/*
* Если нет, то добавляем нашему блоку класс .show, что бы он отображался
* И вешаем обработчик нажатия кнопки
*/
$info.addClass('show');
$infoButton.on('click', () => {
Cookie.set('offer', 'accept');
$info.hide();
});
} else {
/*
* Если есть, то просто удаляем наш блок
*/
$info.remove();
}
});
.info { display: none; } // Скрываем блок по дефолту
.info.show { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info">
<div class="info__btn">Закрыть</div>
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всем привет, начал пользоваться облачными плюшками, всё отлично, но, есть один непонятный моментУ меня приложение Tomcat и база Mysql, чтобы настроить...
При установке сервера MySql сначала требовал установить Visual StudioVisual Studio требовала установить NET Framework