Thứ bảy, ngày 3 tháng 12 năm 2016

jQuery – Tạo cửa sổ popup đơn giản

Ngày đăng: 9/3/2012, 8:44:47AM | Lượt xem: 7,800
Hot!

Cửa sổ popup được tạo ra bao gồm thành phần chính là hai thẻ <div>. Một thẻ được dùng làm nền với màu xám đục và thẻ còn lại dùng để hiển thị nội dung của popup. Kết hợp với các hiệu ứng chuyển động mà jQuery hỗ trợ, bạn có thể tạo được một popup khá hoàn chỉnh.

Simple jQuery PopupCửa sổ popup được tạo ra bao gồm thành phần chính là hai thẻ <div>. Một thẻ được dùng làm nền với màu xám đục và thẻ còn lại dùng để hiển thị nội dung của popup. Kết hợp với các hiệu ứng chuyển động mà jQuery hỗ trợ, bạn có thể tạo được một popup khá hoàn chỉnh.

Tạo một trang HTML với nội dung của thẻ <body> như sau:

<button id="button1">Open Popup</button>

<!-- POPUP CONTENT -->
<div id="popup1" class="popup" style="width:300px;height:200px;">
<div style="background:lavender;">Title<a href="#" class="close"/>x</a></div>
<div align="center" style="margin-top:20px">
Your content here.<br/>
	<img src="Face_Yahoo.png"/>
</div>
<!-- END POPUP CONTENT -->
</div>

<div id="background"></div>

Trong đó:

-          button1: hiển thị popup khi được click.

-          popup1: cửa sổ popup, bao gồm một thanh tiêu đề và phần nội dung.

-          background: nền của popup. Thẻ này sẽ được resize để phủ toàn nội dung trang web. Khi sử dụng nhiều popup, bạn cũng chỉ cần duy nhất một background.

Việc hiển thị cửa sổ popup rất đơn giản. Đầu tiên ta sẽ lấy kích thước của vùng hiển thị trang web trên trình duyệt. Sau đó thay đổi kích thước của background để lấp đầy màn hình và cho hiện lên. Sau đó căn vị trí cho thẻ popup1 nằm giữa màn hình và hiển thị lên.

function openPopup(){
	var dheight = document.body.clientHeight;
	var dwidth = document.body.clientWidth;

	$("#background").width(dwidth).height(dheight);

	$("#background").fadeTo("slow",0.8);

	var $popup1=$("#popup1");
	$popup1.css("top", (dheight-$popup1.height())/2);
	$popup1.css("left",(dwidth-$popup1.width())/2);

	$popup1.fadeIn();
}

Minh họa:

Simple jQuery Popup

Mã nguồn hoàn chỉnh:

<html>
<head>
<title>Simple jQuery Popup</title>
<style>
.popup{
	position: absolute;
	background: white;
	border: 1px solid gray;
	z-index: 10000;
	box-shadow: 3px 3px gray;
}
#background{
	position: absolute;
	background: gray;
	left: 0px;
	top: 0px;
}
a.close{
	text-decoration: none;
	float: right;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
	$(".popup").hide();

	$("#button1").click(function(e) {
		openPopup();
	});

	$(".close").click(function (e) {
		closePopup();
		e.preventDefault();
	});

	$("#background").click(function () {
		closePopup();
	});

});

function openPopup(){
	var dheight = document.body.clientHeight;
	var dwidth = document.body.clientWidth;

	$("#background").width(dwidth).height(dheight);

	$("#background").fadeTo("slow",0.8);

	var $popup1=$("#popup1");
	$popup1.css("top", (dheight-$popup1.height())/2);
	$popup1.css("left",(dwidth-$popup1.width())/2);

	$popup1.fadeIn();
}
function closePopup(){
	$("#background").fadeOut();
	$(".popup").hide();
}
</script>
</head>
<body>

<button id="button1">Open Popup</button>

<!-- POPUP CONTENT -->
<div id="popup1" class="popup" style="width:300px;height:200px;">
<div style="background:lavender;">Title<a href="#" class="close"/>x</a></div>
<div align="center" style="margin-top:20px">
Your content here.<br/>
	<img src="Face_Yahoo.png"/>
</div>
<!-- END POPUP CONTENT -->
</div>

<div id="background"></div>

</body>
</html>

YinYang’s Programming Blog

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.