khá hoàn chỉnh.
Tạo một trang HTML với nội dung của thẻ <body> như sau:
PHP Code:
<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ị
cửa sổ 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
cửa sổ popup
. Thẻ này sẽ được resize để phủ toàn nội dung trang web. Khi sử dụng nhiều
cửa sổ popup
, bạn cũng chỉ cần duy nhất một background trên một
cửa sổ popup.
Việc hiển thị cửa sổ
sử dụng popup bằng jquery
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
cửa sổ popup
. Sau đó căn vị trí cho thẻ popup1 nằm giữa màn hình và hiển thị lên cửa sổ.
PHP Code:
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:
Hiển thị
cửa sổ popup bằng jquery
Mã nguồn hoàn chỉnh:
PHP Code:
<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>
0 comments: