[jQuery] jQuery를 이용한 팝업. div, layer

출처: http://whdrnr01.textcube.com/7?t=c&i=0

jQuery를 이용해서, div의 설정 변경을 통한 레이어 팝업.
ajax랑 함께 쓰면, ajax를 이용해서 데이터를 얻어온 후, div의 안에 원하는 형태로 데이터를 넣고 나서 보여주는 형식이 될 듯.

소스출처: http://yensdesign.com/tutorials/popupjquery/

/**  * jQuery를 이용한 초기 설정  */ $(document).ready(function() {     // 마우스 오버 시 배경색 반전     $(".catLabel1").hover(         function() { // hover 시             $(this).css({"background-color":"yellow", "font-weight":"bolder" });         },         function() { // out 시             $(this).css({"background-color":"white", "font-weight":"normal" });         }     );     $(".catLabel2").hover(             function() { // hover 시                 $(this).css({"background-color":"yellow", "font-weight":"bolder" });             },             function() { // out 시                 $(this).css({"background-color":"white", "font-weight":"normal" });             }         );         // 표준분류 선택 시 전시 카테고리 목록을 표시한다.     $(".catLabel1").click(showAlert);     $(".catLabel2").click(ajaxGetDpCatList);         //CLOSING POPUP     //Click the x event!     /*$("#popupContactClose").click(function(){         disablePopup();     });*/     //Click out event!     $("#backgroundPopup").click(function(){         disablePopup();     });     //Press Escape event!     $(document).keypress(function(e){         if(e.keyCode==27 && popupStatus==1){             disablePopup();         }     }); }); /**  * 표준 분류의 대분류 선택 시 경고 메시지  */ function showAlert() {     alert("표준 카테고리의 중분류를 선택해 주세요."); } /**  * ajax로 전시 카테고리 목록 얻어오기  */ function ajaxGetDpCatList() {     //alert("ajax로 전체 전시 카테고리 정보 얻기");     //alert($(this).attr("title"));         var selectedCatId = $(this).attr("title");     $("#selectedCatId").val(selectedCatId);     //alert($("#selectedCatId").val());         $.ajax({         url: '${pageContext.request.contextPath}/categoryMapping/getDpCatList.omp',         type: 'POST',         dataType: 'json',         timeout: 5000,         error: function(){             alert('전시 카테고리 정보를 얻는 중에 오류가 발생했습니다.');         },         success: function(data){             //alert(data);             //alert(data.dpCatList[0].key + " " + data.dpCatList[0].value);             showDpCatList(data);         }     }); } /**  * 전시 카테고리 목록 표시  */ function showDpCatList(data) {     //alert($("#selectedCatId").val());     //alert(data.dpCatList.length);     var dpCatListPopup = document.getElementById("dpCatListPopup");     // dpCatListPopup 의 내용을 비움. 안하면 계속 늘어남     deleteNodes(dpCatListPopup, "span");     deleteNodes(dpCatListPopup, "br");     // 전시 카테고리 표시용 목록 만들기     var list = data.dpCatList;     for(var i = 0; i < list.length; i++) {         var key = list[i].key;         var label = list[i].value;         var el = document.createElement("span");         el.setAttribute("title", key);         el.setAttribute("class", "dpCatLabel");         //el.setAttribute("onclick", "alert('TEST');"); // DOESN'T WORK. onclick is not attribute.         el.onclick=function(){alert("TEST");};         var txt = document.createTextNode(label);         el.appendChild(txt);         dpCatListPopup.appendChild(el);         dpCatListPopup.appendChild(document.createElement("br"));     }     setPopupPosition();     loadPopup(); } function deleteNodes(parentNode, tag) {     var nodes = parentNode.getElementsByTagName(tag);     var length = nodes.length;         // 이건 nodes가 실시간으로 줄어들면서 length 자체가 줄어든다.     // 따라서 아래의 for문에서 기존 nodes의 갯수만큼 루핑하면서 0번만 계속 지움.     // i번을 삭제하면 stack overflow 남     /*for(var i = 0; i < nodes.length; i++) {         var node = nodes[i];         parentNode.removeChild(node);     }*/         for(var i = 0; i < length; i++) {         var node = nodes[0];         parentNode.removeChild(node);     } } //0 means disabled; 1 means enabled; var popupStatus = 0; /**  * set popup position  */ function setPopupPosition(){     var windowWidth = document.documentElement.clientWidth;     var windowHeight = document.documentElement.scrollHeight; //clientHeight;     var popupHeight = $("#dpCatListPopup").height();     var popupWidth = $("#dpCatListPopup").width();         //centering     $("#dpCatListPopup").css({         "position": "absolute",         "top": 0, //windowHeight/2-popupHeight/2,         "left": windowWidth/2-popupWidth/2     });     //only need force for IE6     $("#backgroundPopup").css({         "height": windowHeight     });     } function loadPopup(){     //loads popup only if it is disabled     if(popupStatus==0){         $("#backgroundPopup").css({             "opacity": "0.7"         });         $("#backgroundPopup").fadeIn("slow");         $("#dpCatListPopup").fadeIn("slow");         popupStatus = 1;     } } function disablePopup(){     //disables popup only if it is enabled     if(popupStatus==1){         $("#backgroundPopup").fadeOut("slow");         $("#dpCatListPopup").fadeOut("slow");                 popupStatus = 0;     } }

setPopupPosition() 으로 위치 설정.
loadPopup() 으로 보이기
disablePopup() 으로 숨기기

backgroundPopup 랑 dpCatListPopup 는 div의 id.