Шаблоны для Datalife Engine

Купить платные адаптивные DLE шаблоны
по приятным ценам.

Время работы: 10.00 - 18.00 (МСК, пн-пт)
Telegram: @vugluskr2023
Техническая поддержка
Корзина 0
Внимание: Обновление шаблонов до 15 и 17.1 версии. Решение проблем с большими краткими новостями, постерами, рейтингом.
Адаптивные dle шаблоны   Советы и новости   Окошко уведомления использования Cookies

Окошко уведомления использования Cookies

В связи с новыми правилами о персональных данных для adsense актуально.

Новый вариант


добавить в шаблоне в main.tpl внизу перед
</body>

добавить
<style>
	.mcookie {background-color: #fff; color: #000; border-radius: 10px; overflow: hidden; display: none; 
		box-shadow: 0 10px 30px rgba(0,0,0,0.25); position: fixed; z-index: 10000; right: 30px; bottom: 30px; width: 600px;}
	.mcookie__btns button {appearance: none; -webkit-appearance: none; display: flex; align-items: center; 
		justify-content: center; height: 40px; cursor: pointer; border-radius: 0; font-weight: bold;
		background: rgba(0,0,0,0.2); color: #000; flex-grow: 1; text-transform: uppercase; font-size: 12px;}
	.mcookie__btns button.mcookie__yes {background-color: #0dc42c; color: #fff;}
	.mcookie__btns {display: flex;}
	.mcookie__text {padding: 30px;}
	.mcookie__text a {color: #06c; text-decoration: underline;}
	.mcookie__title {font-weight: bold; font-size: 16px; 
		padding: 30px; padding-bottom: 0; margin-bottom: -25px;}
@media screen and (max-width: 760px) {
	.mcookie {width: calc(100% - 40px); right: 20px; bottom: 20px;}
}
		</style>

	<div class="mcookie">
		<div class="mcookie__title">We use cookies</div>
		<div class="mcookie__text">
			Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas.
			Star Wars is an American epic <a href="">space opera media franchise</a>, centered on a film series created by George Lucas.
		</div>
		<div class="mcookie__btns">
			<button class="mcookie__yes">I accept</button>
			<button class="mcookie__no">I do not accept</button>
		</div>
	</div>

	<script>
		const mcookie = document.querySelector('.mcookie'), mcookieStatus = localStorage.getItem('mcookie'), 
			mcookieYes = document.querySelector('.mcookie__yes'), mcookieNo = document.querySelector('.mcookie__no');
		if ( mcookieStatus != 1 ) { mcookie.style.cssText = 'display: block' };
		mcookieYes.onclick = ()=> {
			localStorage.setItem('mcookie', 1);
			mcookie.style.cssText = 'display: none'
		};
		mcookieNo.onclick = ()=> {
			window.location.href="https://www.google.com";
		};
	</script>

результат
Окошко уведомления использования Cookies

Старый вариант



1. в main.tpl перед

</body>
вставить

<div class="message-alert">
	<div class="message-alert-in">
		<div class="message-alert-desc">
			<div class="message-alert-caption">We value your privacy</div>
			<div class="message-alert-text">Star Wars is an American epic space opera media franchise, centered on a film series created by George Lucas. It depicts the adventures of characters "a long time ago in a galaxy far, far away".</div>
		</div>
		<div class="message-alert-btns">
			<div class="message-btn message-btn-yes">I accept</div>
			<div class="message-btn message-btn-no">I do not accept</div>
			<a href="#" class="message-link">Show purposes</a>
		</div>
	</div>
</div>


2. в ваш css файл

.message-alert {background-color: #fff; color: #000; box-shadow: 0 0 20px rgba(0,0,0,0.2); display: none; 
position: fixed; left: 0; bottom: 0; z-index: 99999; width: 100%; font-size: 12px; line-height: 1.5;}
.message-alert-in {max-width: 700px; margin: 0 auto; padding: 10px; 
display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between; 
-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
.message-alert-desc {-ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%;}
.message-alert-btns {margin-left: 10px; width: 110px; text-align: center;}
.message-alert-caption {font-size: 1.2em; font-weight: 700; margin-bottom: 7px;}
.message-btn {display: block; padding: 7px 0; cursor: pointer; border-radius: 3px; 
	margin-bottom: 10px; font-weight: 700;}
.message-btn-yes {background-color: green; color: #fff;}
.message-btn-no {color: #888; box-shadow: inset 0 0 0 1px red;}
.message-link {text-decoration: underline; color: #06c;}


3. в ваш js файл

$(document).ready(function(){
	
    var messageAlert = localStorage.getItem('message-alert');
	if (messageAlert != 1) { $('.message-alert').fadeIn(200); };

	$(".message-btn-yes").click(function() {
		localStorage.setItem('message-alert', 1);
		$(".message-alert").fadeOut(200);
	});

	$('.message-btn-no').click(function(){
		window.location.href="http://www.yandex.ru/";
	});
	
});


4. результат

Написать отзыв
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
У меня было пять яблок, два яблока я съел. Сколько у меня осталось яблок? Напиши буквой например десять
Отзывов (9)
waratut
waratut Гости 29 июля 2019 13:07
Спасибо webrambo!
webrambo
webrambo Администраторы 29 июля 2019 13:48
waratut, да не за что)
IMHERO 999
IMHERO 999 Гости 10 января 2020 08:10
Куки записывает? Или каждый раз будут показываться
webrambo
webrambo Администраторы 10 января 2020 09:30
IMHERO 999, записывает в локальное хранилище.
Иван
Иван Гости 25 ноября 2023 10:57
Установил на 17 версию. Вроде отображается норм на компьютере, но в мобильной версии сайта почему-то залазит в бок. Пытался изменить left, right не помогло. Поставил right: 0px; в мобильной вроде исправилось на края вплотную, если возможно подскажите что можно исправить.
Заранее спасибо.
С уважением!
webrambo
webrambo Администраторы 25 ноября 2023 11:34
Иван, да, действительно для смартфонов было не дописано. Изменил css (style) для нового варианта.
Вячеслав
Вячеслав Гости 26 января 2024 09:40
А как его по середине разместить? Ну или угол Право/лево изменить?
webrambo
webrambo Администраторы 26 января 2024 14:34
Вячеслав, слева
.mcookie {left: 30px; right: auto;}

посередине
.mcookie {left: 50%; transform: translateX(-50%); right: auto;}
Вячеслав
Вячеслав Гости 27 января 2024 18:05
webrambo,
Спасибо! Все ок