Ứng dụng mã nguồn NukeViet

https://mynukeviet.net


Lightbox popup đơn giản sử dụng jquery và bootstrap

Bài viết này chia sẽ cách tạo ra lightbox popup đơn giản sử dụng jquery và bootstrap.
Lightbox popup đơn giản sử dụng jquery và bootstrap
Xem demo: http://developers.mynukeviet.net/code/Lightbox-popup-don-gian-su-dung-jquery-va-bootstrap-42/

1. Nhắc đến jquery và bootstrap, đầu tiên hãy thêm liên kết đến jquery và bootstrap.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Lưu ý: Thay thế lại đường dẫn đến các tập tin tương ứng trên dự án của bạn

2. Đặt đoạn mã HTML bên dưới vào tập tin HTML của bạn.
<div class="dark-bg"></div>
<div class="row intro-bg">
	<div class="col-md-12">
		<div id="it-intro">
			<div class="it-test-panel">
				<i class="fa fa-times-circle closePopUp"></i><h3>Simple Popup Box</h3>
				<p class="subheading">
					Easy to use simple popup box with call to action buttons
				</p>
				<p class="extensionText">
					See our products<a class="blue" href="" target="_blank" id="extension">Click Here</a>
				</p>
				<p class="extensionText">
					See our products<a class="green" href="" target="_blank" id="extension">Click Here</a>
				</p>
				<p class="extensionText">
					See our products<a class="red" href="" target="_blank" id="extension">Click Here</a>
				</p>
			</div>
		</div>
	</div>
</div>
3. Đặt đoạn Jquery bên dưới vào khu vực chứa javascript
$(document).ready(function($) {
	setTimeout(function() {
		$('.dark-bg').fadeIn('300', function() {
			$('.intro-bg').slideDown('400');
		});
	}, 1000);
	$('.closePopUp').click(function(event) {
		$('.intro-bg').slideUp('300', function() {
			$(this).remove();
			$('.dark-bg').fadeOut('400', function() {
				$(this).remove();
			});
		});
	});
}); 
4. Và một ít CSS để “trang điểm” thêm
.dark-bg {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.4);
	z-index: 9999;
}
.intro-bg {
	width: 540px;
	position: fixed;
	top: 50%;
	left: 50%;
	display: none;
	margin-top: -175px;
	margin-left: -270px;
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	background: rgb(66, 66, 66);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
	border: 2px solid rgba(0, 0, 0, 0.7) border-radius : 3px;
	z-index: 999999;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E9E9E9));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #E9E9E9);
	background-image: -moz-linear-gradient(top, #FFFFFF, #E9E9E9);
	background-image: -ms-linear-gradient(top, #FFFFFF, #E9E9E9);
	background-image: -o-linear-gradient(top, #FFFFFF, #E9E9E9);
	background-image: linear-gradient(top, #FFFFFF, #E9E9E9);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#E9E9E9');
}
#it-intro {
	padding: 15px 20px;
}
#it-intro h3 {
	font-family: 'proxima_novasemibold', sans-serif;
	color: #434343;
	margin-bottom: 15px;
	margin-top: 0;
	font-weight: bold;
	font-size: 20px;
}
#it-intro p {
	color: #797979;
}
p.extensionText {
	font-size: 15px;
	margin-top: 0;
}
p.extensionText a.green {
	background-color: #1E8C5E;
}
p.extensionText a.green:hover {
	background-color: #1A7750;
}
p.extensionText a.blue {
	background-color: rgb(81, 160, 195);
}
p.extensionText a.blue:hover {
	background-color: rgb(75, 150, 180);
}
p.extensionText a.red {
	background-color: rgb(221, 107, 85);
}
p.extensionText a.red:hover {
	background-color: rgb(212, 103, 82);
}
p.extensionText a#extension {
	margin-left: 65px;
	color: #E7E7E7;
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border-radius: 2px;
}
i.closePopUp {
	position: absolute;
	top: -3px;
	right: -3px;
	font-size: 20px;
	color: #000;
}
i.closePopUp:hover, p.extensionText a#extension:hover {
	cursor: pointer;
}
p.subheading {
	margin-bottom: 20px;
}

Xem demo: http://developers.mynukeviet.net/code/Lightbox-popup-don-gian-su-dung-jquery-va-bootstrap-42/

Nguồn tin: www.infotuts.com