Ads Nhà Tài Trợ
Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

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
Tags

Đăng nhận xét

0 Nhận xét
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Sở hữu một thiết kế thanh lịch và vô cùng đẳng cấp, mang trong mình một hiệu năng "cực khủng", chụp ảnh, quay phim chất lượng hàng đầu nhờ cụm 3 camera 50 MP. Thiết bị hoàn hảo dành cho dân làm việc văn phòng theo mô hình Workcation thích du lịch khám phá, làm Việc Từ Xa,... Thiết bị công nghệ số cực ngon dành cho TELEWORK, WFH, người làm nghề MMO, KOC / Streamer,...

Xem Giá Bán

Laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất. Thiết kế lai giữa laptop gaming và máy tính bảng sáng tạo, sang chảnh, trang bị công nghệ tân tiến nhất, chinh phục mọi giới hạn cùng với cấu hình vượt trội.

Xem Giá Bán