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

Thứ bảy - 03/10/2015 04:47
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

Tổng số điểm của bài viết là: 7 trong 2 đánh giá

Xếp hạng: 3.5 - 2 phiếu bầu
Click để đánh giá bài viết
Rao vặt Đà Nẵng là công cụ mới giúp bạn dễ dàng mang thông tin đến với người xem. Qua đây người dùng có thể đăng tin miễn phí, về các chủ đề như rao vặt, việc làm Đà Nẵng,... lên website mà không phát mất một loại phí nào. 

  Ý kiến bạn đọc

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC