Всплывающее окно по клику - Web-Global: Связывая миры через веб-технологии
Web-Global

Всплывающее окно по клику

Пост опубликован 17 ноября 2021 в 11:56 и находится в рубриках Jquery, Js. 204
Поделиться:

Для реализации popup-а достаточно скрыть блок .popup-fade и добавить событие для открытия окна.

<a class="popup-open" href="#">Открыть popup</a>
 
<div class="popup-fade">
	<div class="popup">
		<a class="popup-close" href="#">Закрыть</a>
		<p>Всплывающие окна имеют широкий диапазон применений...</p>
	</div>		
</div>
 
<style>
.popup-fade {
	display: none;
}
.popup-fade:before {
	content: '';
	background: #000;
	position: fixed; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%;
	opacity: 0.7;
	z-index: 9999;
}
.popup {
	position: fixed;
	top: 20%;
	left: 50%;
	padding: 20px;
	width: 360px;
	margin-left: -200px;	
	background: #fff;
	border: 1px solid orange;
	border-radius: 4px; 
	z-index: 99999;
	opacity: 1;	
}
.popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
}
</style>
 
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
	$('.popup-open').click(function() {
		$('.popup-fade').fadeIn();
		return false;
	});	
	
	$('.popup-close').click(function() {
		$(this).parents('.popup-fade').fadeOut();
		return false;
	});		
 
	$(document).keydown(function(e) {
		if (e.keyCode === 27) {
			e.stopPropagation();
			$('.popup-fade').fadeOut();
		}
	});
	
	$('.popup-fade').click(function(e) {
		if ($(e.target).closest('.popup').length == 0) {
			$(this).fadeOut();					
		}
	});
});
</script>
https://codepen.io/uzxan/pen/abyPqpP