[JavaScript] 제이쿼리로 레이어팝업 만들기

/*-----------------------------------------<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> ---------------------------------------------*/