Меню-подсказка на затемненном фоне

Меню-подсказка на затемненном фоне

Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со стрелкой и затемнение из модального окна.

Верстка:

<div class="hint">
	<a class="hint-triger" href="#">Нажми меня</a>
	<div class="hint-popup">
		<a class="hint-close" href="#" title="Закрыть"></a>
		<h3>Lorem Ipsum</h3>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
			Curabitur volutpat euismod ipsum. Sed aliquam sit amet<br>
			est mattis mattis. Etiam vitae magna vitae dolor tempor porta. 
		</p>
	</div>
</div>
HTML

JS:

$(function(){
	$(".hint-triger").click(function(){
		$(this).next().show(0).after('<div class="hint-fade">');
		return false;
	});	
	
	$(".hint-close").click(function(){
		$(".hint-popup").hide(0);
		$(".hint-fade").remove();
		return false;
	});
});
JS

CSS:

.hint {
	position: relative;
}
.hint-popup {
	display: none;
	width: 400px;
	padding: 10px;
	position: absolute;
	left: 40px;
	top: 170%;
	background: #fff;
	border-radius: 5px;
	z-index: 99999;
}
.hint-popup:before {
	content: ""; 
	border: solid transparent;
	position: absolute;    
	left: 8px;    
	bottom: 100%;
	border-bottom-color: #fff;
	border-width: 9px;
	margin-left: 0;
}
.hint-close {
	position: absolute;    
	right: 15px;    
	top: 15px;
	background: url(/close.png) 0 0 repeat;
	display: block;
	width: 16px;
	height: 16px;
	z-index: 100;
}
.hint-fade {
	cursor: pointer;
}
.hint-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
CSS

Результат:

Добавим закрытие кликом по фону и клавишей Esc.

Из-за того что фон добавляется динамически, событие $(".hint-fade").click() работать не будет, поэтому используется $('body').on('click', '.hint-fade', ...).

$(function(){
	$(".hint-triger").click(function(){
		$(this).next().show(0).after('<div class="hint-fade">');
		return false;
	});
	
	$('body').on('click', '.hint-close, .hint-fade', function(){
		$(".hint-popup").hide(0);
		$(".hint-fade").remove();
		return false;
	});
	
	$(document).keyup(function(e){
		if (e.key === "Escape"){
			$(".hint-popup").hide(0);
			$(".hint-fade").remove();
		}
	});
});
JS
28.08.2019
5639

Комментарии 1

Дмитрий Дмитрий
7 августа 2020 в 13:48
Приветствую, подскажите как сделать чтоб подсказка сама скрывалась через определенное время, допустим 5 секунд?

, чтобы добавить комментарий.

Другие публикации

Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
50796
+20
Select option с ссылками
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
24468
+9
Показать/скрыть пароль
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.
94351
+21
Селект с чекбоксами
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все сбрасывается. В место него можно использовать чекбоксы в выпадающем списке.
36057
+10
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
12469
+3
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
60067
+7