POPTAMV - jQuery Dynamic Popup

by. SiTAMVAN.COM

by Rian .N Herdian

HTML

<a href="#pertamax" data-title="<b style='color:#009688;'>Pertamax</b> Popup" class="poptamv-btn">Open Pertamax Popup</a>

<!-- PopTamv -->
<div class="poptamv" id="pertamax">
	<div class="wrap">
		<div class="content">
			<div class="poptamv-wrap">
			<b>PERTAMAX</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed distinctio delectus asperiores accusantium sapiente odit ad reiciendis quae animi dolorem, doloribus quibusdam, ipsa fuga qui rerum excepturi numquam fugit veniam.
			</div>
		</div>
	</div>
</div>
<!-- // PopTamv -->

CSS

body {
font-family: helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
}
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
.poptamv {
position: relative;
position: fixed!important;
z-index: +101;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
padding: 20px 0;
visibility: hidden;
opacity: 0;
transition: .4s;
}

.poptamv.open {
visibility: visible;
opacity: 1;
}

.poptamv a {
text-decoration: none;
}

.poptamv .wrap {
display: block;
margin: auto auto;
width: calc(100% - 20px);
box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
max-width: 500px;
}

.poptamv .wrap .title {
display: block;
height: 40px;
line-height: 40px;
box-shadow: 0 1px 0 0 #eee;
font-size: 14px;
background: #fff;
border-radius: 4px 4px 0 0;
}

.poptamv .wrap .title span {
padding: 0 10px;
color: #444;
}

.poptamv .wrap .title .close {
color: #aaa;
float: right;
padding: 0 20px;
cursor: pointer;
border-left: 1px solid #eee;
font-size: 25px;
font-weight: normal;
transition: .2s;
}
.poptamv .wrap .title .close:hover {
color: #444;
}

.poptamv .wrap .title .close:before {
content: '';
cursor: default;
display: block;
position: fixed;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 100px);
background: rgba(0, 0, 0, .2);
}

.poptamv .wrap .content {
display: block;
overflow-y: auto;
max-height: calc(100vh - 80px);
background: #fff;
border-radius: 0 0 4px 4px;
position: relative;
z-index: -1;
}

/* poptamv ++ */
.poptamv .poptamv-wrap {
padding: 20px;
}

JavaScript

$('.poptamv').each(function(){
	$('<h3 class="title clear">'+
	'<span class="title-content"></span>'+
	'<a class="close" href="javascript:void(0);">&times;</a>'+
	'</h3>').prependTo($(this).find('.wrap'));
});
$(window).on('load', function() {
		$('.poptamv-btn.onload').trigger('click');
});
$('.poptamv-btn').on('click', function() {
		var title = $(this).attr('data-title');
		var target = $(this).attr('href');
		$(target).addClass('open');
		$(target).find('.title-content').html(title);
});
$('.poptamv .close').on('click', function() {
		$(this).parents('.poptamv').removeClass('open');
});
$(document).keyup(function(e) {
		if (e.key === "Escape") {
				$('.poptamv .close').trigger('click');
		}
});