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

Posted on by mtoplistChuyên mục:Top List

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

Đánh giá:

Share this:

Thích bài này:

Thích

Đang tải…

mtoplist