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.
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:
<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
Drupal Developer having 9+ year experience, implementation and having strong knowledge of technical specifications, workflow development. Ability to perform effectively and efficiently in team and individually. Always enthusiastic and interseted to study new technologies
3 năm trước, chuyên gia bảo mật Dragos Ruiu đã phát hiện ra một điều gì đó bất bình thường với chiếc máy tính MacBook Air của mình khi ông đang làm việc trong phòng thí nghiệm
By now I assume you are getting as tired as we are hearing about the ongoing legal battles between Apple and Samsung.
If one is obsessed with famous Samsung Galaxy S phones, then they have another Android smart phone as Samsung Galaxy S Plus I9001. This phone is power-packed with prominent high-end characteristics and specifications
