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/