/*-----------------------------------------<create PopUp> ---------------------------------------------*/
$(".layerPopup").click(function (event){ // 버튼 클릭시 실행 이벤트
var height=0;
var width=0;
// var cssUri = $(this).attr("data-css");
var mappingUri = $(this).attr("name"); //클릭한 객체의 name값에 요청할 URL을 미리 넣어놓고 사용
// alert(mappingUri);
var s_w =$(document.body).width();
var w=500;
var left = s_w/2 - w/2;
if(s_w/2 < w/2)
left=0;
// create wrapper
var wrapper=$("<div />");
wrapper.css({
width:"0px",
height:"0px",
border:"2px solid #000",
background:"#fff",
position:"absolute",
left: left,
top:"100px",
});
var screenH = $(document).height();
// create screen & run animation
var screen = $("<div />");
screen.css({
width:"100%",
height:screenH,
background:"#000",
position:"absolute",
left:"0px",
top:"0px",
opacity:"0",
zIndex:22
}).animate({opacity:"0.5"},500,function(){
$(document.body).append(wrapper);
// setting CSS
var link = document.createElement("link");
link.setAttribute("rel","stylesheet");
link.setAttribute("type","text/css");
// link.setAttribute("href", cssUri);
document.getElementsByTagName("head")[0].appendChild(link);
// alert(mappingUri);
// Load popUp Page
wrapper.load(mappingUri,function(){
// load popUp Page's size
var first=wrapper.children("div").eq(0);
console.log(first);
width= first.outerWidth();
height = first.outerHeight();
console.log(width);
left = s_w/2 - width/2;
if(s_w/2 < w/2)
left=0;
screen.attr("id","screen");
wrapper.attr("id","newWapper");
wrapper.animate({
width:width,
"z-index":"23",
left:left
},500)
.animate({
height:height
},500);
// remove popUp Page&screen
$("#screen").click(function(){
wrapper.animate({
width:"0px"
},500)
.animate({
height:"0px"
},500,function(){
screen.animate({
opacity:"0"
},500);
wrapper.detach();
screen.detach();
});
});
});
});
$(document.body).append(screen);
// resizing
$(window).resize(function() {
s_w =$(document.body).width();
var left = s_w/2 - w/2;
if(s_w/2 < w/2)
left=0;
wrapper.css({left: left });
});
});
/*-----------------------------------------</create PopUp> ---------------------------------------------*/
'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글
| [JavaScript] object 객체의 속성 동적 추가 (0) | 2016.03.07 |
|---|---|
| [javaScript] setInterval / 시간단위 반복 (0) | 2015.07.01 |
| [ajax] ajax사용시 뒤로가기 문제 (0) | 2015.06.23 |
| [JavaScript] 자바스크립트 문자열 자르기 (0) | 2015.06.16 |
| [JavaScript] 자바스크립트 특수문자 인코딩 (0) | 2015.05.28 |
