div 레이어를 버튼클릭에 따라 유동적으로 보여지게 만들었다.
이 레이어는 셀렉트박스(ASP.NET : DropDownList) 위로 덮히는 구조인데
문제는 언제나 그렇듯이 우리 상큼이 IE6 ^^^^^*
z-index를 주건말건 무조건 셀렉트박스를 상위로 렌더링해주는 아름다운 현상!
검색을 해보면 iframe을 박는 방법 혹은 자바스크립트로 처리하는 방법 등 다양한데
애석하게도 내 마음에 드는건 하나도 없었다.
그래서 생각해낸 방법은 레이어의 none / block 을 체크해서, 현재 브라우저가 IE6인 경우는 셀렉트박스를 none 또는 block 으로 처리하는 것.
$("#viewLayer").hide();
var i = 0;
$("#showButton").click(function() {
$("#viewLayer").toggle(i++ % 2 == 0);
if ($("#viewLayer").is(":visible") && $.browser.msie && $.browser.version.substring(0, 1) === "6")
$(".hidden td").css("display", "none");
else {
$(".hidden td").css("display", "block");
}
});
var i = 0;
$("#showButton").click(function() {
$("#viewLayer").toggle(i++ % 2 == 0);
if ($("#viewLayer").is(":visible") && $.browser.msie && $.browser.version.substring(0, 1) === "6")
$(".hidden td").css("display", "none");
else {
$(".hidden td").css("display", "block");
}
});
#viewLayer는 셀렉트박스 위로 덮였다 사라졌다 하는 레이어의 ID.
#showButton은 #viewLayer를 컨트롤하는 버튼의 ID.
레이어가 [display:block] 이고, 브라우저가 IE6이면 셀렉트박스는 [display:none]
.hidden은 숨길 셀렉트박스의 클래스로 추가해줘도 되고 혹은 감싸고있는 div에 추가해줘도 되는데, 현재 내가 작업한 부분은 테이블 구조이기 때문에 아예 tr에 클래스를 추가해주고 셀렉트박스가 있는 td를 보이지 않게 만들었다.
만약 셀렉트박스나 div에 추가했다면 위 소스에서 td를 빼버리면 된다.
'Html·Css·Js' 카테고리의 다른 글
| Slide Down Box Menu with jQuery and CSS3 (0) | 2012/05/11 |
|---|---|
| HTML Characters Codes - Accents (0) | 2010/12/02 |
| [jQuery] 현재 브라우저가 IE6인지 체크 (1) | 2010/11/21 |
| [CSS] 버튼/링크 클릭 시 생기는 점선 테두리 없애기 (2) | 2010/11/02 |
| HTML5 애니메이션 개발 툴 "EDGE" 미리보기 (0) | 2010/10/26 |
| Doctype에 따른 렌더링 모드 (0) | 2010/10/11 |


비밀댓글입니다