출처:
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.
