Message Layer

구질구질한 코드 두개

절대위치 DIV를 화면 중앙에 표현

IE의 <select> 버그를 없애기 위해 아이프레임(iframe)을 이용

function openMessageWindow(elId) {
	var windowEl = document.getElementById(elId.split("#")[1]);
	if (!windowEl)
		return true;

	windowEl.style.display = '';
	windowEl.style.zIndex = 2;
	windowEl.style.position = 'absolute';
	windowEl.style.top = document.documentElement.scrollTop + (document.documentElement.clientHeight - windowEl.offsetHeight) / 2 + "px";
	windowEl.style.left = (document.documentElement.clientWidth - windowEl.offsetWidth) / 2 + "px";

	if (windowEl.mask)
		return true;

	var mask = document.createElement("iframe");
	mask.frameBorder = 0;
	mask.style.width = windowEl.offsetWidth + "px";
	mask.style.height = windowEl.offsetHeight + "px";
	mask.style.position = 'absolute';
	mask.style.top = windowEl.style.top;
	mask.style.left = windowEl.style.left;
	mask.style.zIndex = 1;
	document.getElementById("body").appendChild(mask);
	windowEl.mask = mask;
}
function closeMessageWindow(elId) {
	var windowEl = document.getElementById(elId.split("#")[1]);
	if (!windowEl)
		return true;

	windowEl.style.display = "none";
	windowEl.mask.parentNode.removeChild(windowEl.mask);
	windowEl.mask = null;
}

라이트 박스(light box) 효과

아이프레임을 생성하여 링크의 페이지를 화면 중앙에 표현

function openMessageWindow(href) {
	var windowEl = document.createElement("iframe");
	windowEl.src = href;
	windowEl.frameBorder = 0;
	windowEl.scrolling = "no";
	windowEl.allowTransparency = "true";
	windowEl.style.zIndex = 1001;
	windowEl.style.position = 'absolute';
	document.getElementById("body").appendChild(windowEl);
	document.getElementById("body").popup = windowEl;

	var selects = document.getElementsByTagName("select");
	for (i = 0; i < selects.length; i++) {
		selects.item(i).hided = true;
		selects.item(i).style.visibility = "hidden";
	}

	var mask = document.createElement("div");
	mask.onclick = closeMessageWindow;
	mask.style.width = document.documentElement.clientWidth + "px";
	mask.style.height = document.documentElement.scrollHeight + "px";
	mask.style.position = 'absolute';
	mask.style.top = "0";
	mask.style.left = "0";
	mask.style.zIndex = 1000;
	mask.style.backgroundColor = "#000";
	mask.style.opacity = "0.2";
	mask.style.filter = "alpha(opacity = 20)";
	document.getElementById("body").appendChild(mask);
	windowEl.mask = mask;
}
function closeMessageWindow() {
	var windowEl = parent.document.getElementById("body").popup;
	if (!windowEl)
		return true;

	var selects = parent.document.getElementsByTagName("select");
	for (i = 0; i < selects.length; i++) {
		if (selects.item(i).hided == true) {
			selects.item(i).style.visibility = "visible";
		}
	}

	windowEl.style.display = "none";
	windowEl.mask.parentNode.removeChild(windowEl.mask);
	windowEl.mask = null;
}
function positionMessageWindow() {
	if (!parent.document.getElementById("body").popup)
		return;

	var windowEl = parent.document.getElementById("body").popup;
	windowEl.style.height = "auto";
	windowEl.style.width = "auto";
	var windowElHeight = document.documentElement.scrollHeight;
	var windowElWidth = document.documentElement.scrollWidth;
	windowEl.style.height = windowElHeight + "px";
	windowEl.style.width = windowElWidth + "px";
	windowEl.style.top = parent.document.documentElement.scrollTop + (parent.document.documentElement.clientHeight - windowElHeight) / 2 + "px";
	windowEl.style.left = (parent.document.documentElement.clientWidth - windowElWidth) / 2 + "px";
}