IE6에서 select 메뉴를 숨기기 위해서는 몇가지 방법이 있다.
1. 레이어가 뜨는 영역의 select박스를 hidden 시키키
2. slelet box위에 iframe을 만들어주고 그 위에 레이어 띄우기

1번의 경우는 레이어가 고정값과 고정위치에서 보여진다면 쉽게 적용가능하나, 레이어의 위치등이 변하거나 셀렉트 박스가 중간에 걸쳐질경우에는 적용하기 힘들다.

2번의 경우엔 불필요한 태그가 들어가기도 하지만 어쨌든 유동적인 레이어에 적합한 형태이다.
단, 2번의 경우 매번 해당 레이어의 사이즈와 위치값을 계산하기 힘든점이 있어서 좀 간단하게 써먹기 위해 javascript로 만들어보았다.

1. 자바스크립트를 정의 한다. 단, IE용 comment 핵으로 IE6에만 적용하게끔 한다.

<!--[if lte IE 6.0]>
<script type="text/javascript">
function selectFix(divID) {
	var tar = document.getElementById(divID);
	var tarWidth = tar.offsetWidth;
	var tarHeight = tar.offsetHeight;
	var tarTop = tar.offsetTop;
	var tarLeft = tar.offsetLeft;

	var coverID = divID + "_cover";

	if (document.getElementById(coverID)) return false;

	var cover = document.createElement("iframe");
	tar.parentNode.insertBefore(cover,tar);
	cover.setAttribute("id",coverID);

	if (!document.getElementById(coverID)) return false;
	var obj = document.getElementById(coverID);
	obj.setAttribute("frameborder",0);
	obj.style.position = "absolute";
	obj.style.top = tarTop + "px";
	obj.style.left = tarLeft + "px";
	obj.style.width = tarWidth + "px";
	obj.style.height = tarHeight + "px";
}
function removeSelectFix(divID) {
	var tar = document.getElementById(divID);
	var obj = document.getElementById(divID + "_cover");
	if (!obj) return false;
	tar.parentNode.removeChild(obj);
}
</script>
<![endif]-->

2. 레이어를 보이게 하는 자바스크립트 함수 showPopup이 있다고 가정하고, 아래처럼 selectFix을 추가한다. 여기서 “popup”은 띄워지는 레이어의 id값이다.

function showPopup() {
	document.getElementById("popup").style.display = "";
	try{
		if(selectFix) {
			selectFix(”popup”);
		}
	}catch(aa){}

}

3. 레이어를 숨기는 자바스크립트 함수 hidePopup에 removeSelectFix 함수를 추가해준다.

function hidePopup() {
	document.getElementById("popup").style.display = "";
	try{
		if(removeSelectFix) {
			removeSelectFix(”popup”);
		}
	}catch(aa){}

}

* ie용 핵을 이용해서 ie6에만 쓰게하지 않아도 ie7과 FF에서도 제대로 작동은 하지만… 굳이 ie6일때만 iframe을 생성하게 하고 싶었음.
코멘트 핵을 제거하고 써도 문제없음.

* 예제 보기

You can leave a response, or trackback from your own site.