%
Xe đạp thể thao Road Vivente 700C-LINE 27.5 inch [ Màu cam ]
Xe Đạp
Thể Thao
%
XE ĐẠP THỂ THAO KHUNG NHÔM VÀNH 26 INCH
Xe Đạp
Thể Thao
%
Sạc dự phòng mini YM300S 20000mAh kèm dây cáp, 4 cổng kết nối tiện dụng
Pin Sạc
Dự Phòng
%
Sạc dự phòng 20000mAh sạc nhanh 18W QC3.0/PD mã ONC Flash Titan hiển thị LCD
Pin Sạc
Dự Phòng

Code tạo Popup tự co dãn, căn giữa ...

Click HERE Show popup
<style>
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
a#show-popup {
margin:20px 0 0 20px;
float:left;
text-decoration:none;
}
div#popup-bg {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:99;
background:#000;
display:none;
}
div#popup {
width:400px;
height:200px;
border:solid 4px #000000;
z-index:999;
display:none;
background:#FFF;
}
div#popup-header {
position:relative;
float:left;
width:400px;
line-height:30px;
font-size:20px;
background:#000;
color:#FF0;
cursor:move;
}
span#popup-close {
cursor:pointer;
color:#FFF;
font-size:12px;
position:absolute;
top:-2px;
right:10px;
z-index:9999;
}
div#popup-content {
width:670px;
float:left;
padding:5px;
}
</style>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script language="javascript">
$(document).ready(function(){
(function($){
//Căn giữa phần tử thuộc tính là absolute so với phần hiển thị của trình duyệt, chỉ dùng cho phần tử absolute đối với body
$.fn.absoluteCenter = function(){
this.each(function(){
var top = -($(this).outerHeight() / 2)+'px';
var left = -($(this).outerWidth() / 2)+'px';
$(this).css({'position':'absolute', 'position':'fixed', 'margin-top':top, 'margin-left':left, 'top':'50%', 'left':'50%'});
return this;
});
}
})(jQuery);

$('a#show-popup').click(function(){
//Đặt biến cho các đối tượng để gọi dễ dàng
var bg=$('div#popup-bg');
var obj=$('div#popup');
var btnClose=obj.find('#popup-close');
//Hiện các đối tượng
bg.animate({opacity:0.2},0).fadeIn(1000); //cho nền trong suốt
obj.fadeIn(1000).draggable({cursor:'move',handle:'#popup-header'}).absoluteCenter(); //căn giữa popup và thêm draggable của jquery UI cho phần header của popup
//Đóng popup khi nhấn nút
btnClose.click(function(){
bg.fadeOut(1000);
obj.fadeOut(1000);
});
//Đóng popup khi nhấn background
bg.click(function(){
btnClose.click(); //Kế thừa nút đóng ở trên
});
//Đóng popup khi nhấn nút Esc trên bàn phím
$(document).keydown(function(e){
if(e.keyCode==27){
btnClose.click(); //Kế thừa nút đóng ở trên
}
});
return false;
});
});
</script>
<a href="#" id="show-popup">Show popup</a>
<div id="popup-bg"></div>
<div id="popup">
<div id="popup-header">Header<span id="popup-close" title="Close">x</span></div>
<div id="popup-content">Content</div>
</div>
- Mua sàn gỗ tự nhiên liên hệ số : 0984.512.478 gặp C. Trang
Sạc dự phòng tích hợp màn hình Led Dung Lượng 10000MAH

Xem sản phẩm,...

Đăng nhận xét

Mới hơn Cũ hơn
Shop Mua Sắm Online Công Nghệ 4.0