Программирование сайтов
24 Ноя в 09:55

Модальное окно (простое)

Требуется только jQuery.
HTML:

<div class="show-popup">Показать окно</div>
<div class="lite-popup-wrapper">
	<div class="fon"></div> 
	<div class="popup">
		<div class="popup-content">Содержимое</div>
		<div class="closeblock">+</div>
	</div>
</div>

CSS:

.show-popup {
	cursor: pointer
}
.lite-popup-wrapper {
	display:none;    
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index: 999;
}
.lite-popup-wrapper .fon {
	background: rgba(0, 0, 0, 0.8);
	position:fixed;
	width:100%;
	height:100%;
}
.lite-popup-wrapper .closeblock {
	cursor: pointer;
	position: absolute;
	line-height: 44px;
	font-size: 44px;
	transform: rotate(45deg);
	text-align: center;
	top: 0;
	right: 12px;
	color: #333;
}
.lite-popup-wrapper .closeblock:hover {
	color: #000;    
}
.lite-popup-wrapper .popup {
	position: relative;
	width: 400px;
	max-width: 100%;
	padding: 40px 0 20px;
	background: #00aeef;
	color: #fff;
	text-align: center;
	font-size: 14px;
	top: 50vh;
	margin: -38px auto; // половина высоты окна
}
.lite-popup-wrapper .popup .popup-content {
	padding: 0 15px;
}			
/* Эти стили нужны, только если в окне будет форма */
.lite-popup-wrapper .popup textarea,
.lite-popup-wrapper .popup input[type='text'],
.lite-popup-wrapper .popup input[type='email'] {
	border:0;
	font:14px;
	background:#fff;
	padding:10px;
	width:100%;
	color:#000;
}
.popupform input[type='submit']{
	cursor:pointer;
	padding:5px 10px;
	color:#000;
}

JS:

$('.show-popup').on('click', function(){
	$('.lite-popup-wrapper').show();
});		
$('.closeblock').on('click', function(){
	$('.lite-popup-wrapper').hide();
});	
Показать окно