저장이나 등록, 전송 버튼을 클릭 후 업로드 되는 동안 사용자가 버튼을 또 클릭하지 못하도록 버튼 클릭 시 레이어를 띄워서 클릭을 못하도록 가려둔다.
사용하는 방법은 버튼 클릭할 때 일어나는 ‘onclick’ 이벤트에서 일어나는 자바스크립트에 loading(1); 을 실행한다.
img_lo에 이미지를 미리 만들어주고, 미리 생성된 이미지를 화면에 포함시켜준다. 멈추는 경우가 발생할 수 있어 reloading_img()를 통해 실행하고 다시 이미지를 넣어준다.
수정사항
2013.08.09 z-index를 javascript에서 zIndex로 사용.
2013.08.12 console.log 버그를 찾고 수정하고 코드 정리함.
2013.08.27 멈추는 경우도 고려해 다시 수정.
var img_lo = document.createElement("span");
img_lo.innerHTML = "<img id="img_lo" src="./loading.gif" width="40" height="40">"
function loading(d) { //변수 -> 이름,포지션 -> 높이,넓이 -> 마진,패딩 -> 위치 -> 기타
if(d == 1) {
var div_full = document.createElement("div"); // 화면 덮는 div
var div_center = document.createElement("div"); // 센터 텍스트 담는 div
var div_center2 = document.createElement("div"); // 센터 반투명 div
var loading_text = document.createElement("p"); // 텍스트 p
div_full.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
div_center.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
//var w = 0, h = 0; // 크로스브라우징 높이,넓이 조절
var w = '50%', h = '50%';
/*
if (typeof (window.innerWidth) == 'number') { //Chrome
w = window.innerWidth / 2;
h = window.innerHeight / 2;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
w = document.documentElement.clientWidth / 2;
h = document.documentElement.clientHeight / 2;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE9
w = document.body.clientWidth / 2;
h = document.body.clientHeight / 2;
}
*/
// 텍스트 태그 생성
loading_text.style.height = "30";
loading_text.style.width = "200";
//loading_text.style.margin = "20px 0px 20px 0px";
loading_text.style.margin = "15px 0px 15px 0px";
loading_text.style.fontWeight = "bold";
loading_text.innerHTML = "데이터 처리 중입니다.
잠시 기다려주십시오.";
//전체 투명레이어
div_full.style.position = "absolute";
div_full.style.height = "100%";
div_full.style.width = "100%";
div_full.style.top = "0";
div_full.style.left = "0";
div_full.style.background = "#000000";
div_full.style.opacity = "0.0";
div_full.style.filter = "alpha(opacity=00)";
div_full.style.zIndex = "9995";
//이미지 중앙에 배치할 레이어
div_center.style.position = "absolute";
div_center.style.height = "100";
div_center.style.width = "200";
div_center.style.top = h;
div_center.style.left = w;
div_center.style.marginLeft = "-100px";
div_center.style.marginTop = "-50px";
div_center.style.textAlign = "center";
div_center.style.zIndex = "9998";
div_center2.style.position = "absolute";
div_center2.style.height = "100";
div_center2.style.width = "200";
div_center2.style.top = h;
div_center2.style.left = w;
div_center2.style.marginLeft = "-100px";
div_center2.style.marginTop = "-50px";
div_center2.style.background = "#ffffff";
div_center2.style.opacity = "0.8";
div_center2.style.filter = "alpha(opacity=80)";
div_center2.style.zIndex = "9996";
//포함시키기
div_center.appendChild(img_lo);
div_center.appendChild(loading_text);
document.body.appendChild(div_full);
document.body.appendChild(div_center2); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함.
document.body.appendChild(div_center); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함.
} else if(d == 0) {
div_full.parentNode.removeChild(div_full);
div_center2.parentNode.removeChild(div_center2);
div_center.parentNode.removeChild(div_center);
}
}
※ 자바스크립트에서는 CSS의 ‘z-index’를 사용할 때, ‘zIndex’로 사용해야 한다.
결론 : 나름 완성시킨 코드이지만 사용하면서 아직 문제점이 많을 것으로 보인다. 차근차근 코드를 수정해 나가야겠다. |
