Понравилось как на сайте Кинопоиска https://www.kinopoisk.ru реализовано сообщение тем, кто использует Адблок

Изображение

Как реализовать точно такое же окошко? Так же с возможностью скрытия и прочим.
Комментарии: 6

CabinetAdmin 01 июл 2020, 14:03 Сообщение

Могу предложить такой вариант. В футер добавляете:

Код: Выделить всё

<div id="toaster-container" class="adblock-container" style="display: none;">
	<div class="adblock-warning">
		<div id="toaster-close" class="adblock-warning__close"></div>
		<div class="adblock-warning__content">
			<span class="adblock-warning__image"></span>
			<p class="adblock-warning__text">Кажется, вы используете блокировщик рекламы. Вместе с рекламой он может отключать и другие важные элементы. Добавьте Наш Сайт в исключения, и всё будет в порядке.</p>
		</div>
	</div>
</div>
<div id="adsense" style="position:absolute;left:-9999px;">Adblock</div>
<script>
function isAdb(){
	var banner = document.getElementById('adsense'),
		toaster = document.getElementById('toaster-container'),
		ch = banner.currentStyle || window.getComputedStyle(banner, null);
	ch = parseInt(ch.height);
	if (isNaN(ch) || (ch == 0)) {
		toaster.style.display = '';
		document.getElementById('toaster-close').onclick = function() {
			toaster.style.display === 'none' ? toaster.style.display = 'initial' : toaster.style.display = 'none';
		}
	}
	banner.style.display = 'none';
}
setTimeout("isAdb();", 1000);
</script>
Стили:

Код: Выделить всё

/* $Adblock */
.adblock-container {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 15;
}
.adblock-warning {
	position: relative;
	background-color: #3b4859;
}
.adblock-warning__close {
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cpath d='M0 0h18v18H0z'/%3E %3Cpath stroke='%23FFF' stroke-linecap='square' stroke-width='1.5' d='M4 4l9.9 9.9M14 4l-9.9 9.9'/%3E %3C/g%3E %3C/svg%3E");
	position: absolute;
	right: 24px;
	top: 18px;
	opacity: .7;
	height: 18px;
	width: 18px;
}
.adblock-warning__close:hover {
	opacity: 1;
}
.adblock-warning__content {
	width: 720px;
	margin: auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 14px 0 16px;
}
.adblock-warning__image {
	display: block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E %3Cpath fill='%23FFF' fill-rule='evenodd' d='M10.703 0L0 9.73v15.567L10.703 36h14.594L36 25.297V9.73L25.294 0H10.703zM2.919 24.09V11.021l8.912-8.102h12.334l8.916 8.102v13.068l-8.992 8.992H11.91L2.919 24.09zM17.422 7.117a1.113 1.113 0 0 0-.365.34c-.126.21-.133.449-.133 4.436v4.219l-.176.116c-.231.152-.512.079-.597-.16-.041-.108-.07-1.562-.07-3.553 0-2.981-.013-3.386-.112-3.567-.175-.297-.45-.434-.904-.434-.45 0-.731.123-.92.413-.126.188-.133.404-.155 3.92-.013 2.549-.042 3.757-.098 3.822-.091.116-.491.123-.603.008-.063-.065-.085-.796-.085-2.845 0-2.474-.013-2.771-.126-2.996-.161-.325-.511-.513-.975-.513-.428 0-.737.217-.856.6-.035.13-.085 1.079-.112 2.113l-.106 4.798c-.091 3.858.014 5.102.596 6.94.302.933.568 1.462 1.06 2.077 2.028 2.533 6.056 2.858 9.004.717a8.731 8.731 0 0 0 1.03-.934c1.012-1.05 1.194-1.411 2.66-5.123 1.299-3.286 1.314-3.33 1.23-3.62-.155-.542-.793-.918-1.37-.81-.434.087-.624.39-1.621 2.613-.518 1.15-.982 2.12-1.031 2.149a.446.446 0 0 1-.583-.123c-.098-.16-.112-.76-.084-6.47.02-6.266.02-6.295-.126-6.498-.442-.622-1.453-.593-1.817.05-.134.247-.141.384-.162 3.8-.014 2.388-.042 3.568-.098 3.633-.12.152-.534.116-.618-.043-.042-.095-.071-1.578-.071-4.313 0-4.617.007-4.545-.441-4.762-.315-.16-.855-.152-1.165 0z'/%3E %3C/svg%3E");
	height: 36px;
	width: 36px;
}
.adblock-warning__text {
	font-family: Arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #fff;
	margin: 0 0 0 16px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 01 июл 2020, 16:04 Сообщение

Ничего не появляется
  • 0
Изображение

CabinetAdmin 01 июл 2020, 18:34 Сообщение

Весь код добавили? Не вижу блока с классом toaster-container.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 01 июл 2020, 20:35 Сообщение

Попробовал еще раз скопировать, странно, наверное не все скопировалось, теперь гуд, еще бы кнопку справа с ссылкой и вообще полный класс!!!

Хотя еще бы конечно чтобы эта надпись после переходов не появлялась опять, или появлялась но не сразу, а там например через 10 или 20 переходов или при следующем заходе на сайт
  • 0
Изображение

CabinetAdmin 01 июл 2020, 21:37 Сообщение

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

Посмотрю на днях как можно это сделать.
  • 0
Хочешь поблагодарить? Есть способы - Поддержать проект

igorbond 01 июл 2020, 22:42 Сообщение

Тогда да, думаю это не стоит того
  • 0
Изображение

Похожие темы