프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[SCRIPT] 레이어팝업 위로 뚫고 나오는 셀렉트박스 감

2010.12.27
북마크 [출처 이동]    작성자 정보
오늘 소개하는 건 익스6에서만 발생되는 셀렉트박스 위로 레이어 팝업이 존재할때 뚫고 나오는 셀렉트박스를
iframe을 통해 감추는 방법이다.. 머 대부분의 웹퍼블리셔분들이 다 알고 있는 거겠지만, 난 꼭 이 방법을
잊을만하면 또 생기는 경우가 있어서 아예 여기다가 남겨놓고 초스피드로 해결하려고 한다.
아, 다른 방법도 있다.. 레이어팝업의 위치를 옮기자고 울고불고 매달리는 것이다 -..-


1.<iframe></iframe>
위 이미지가 기본 아이프레임 모습이다. 겉에 테두리가 생기는 데 익스에서는 border 속성으로는 없앨수 없는 녀석이다. css에 filter: alpha(opacity=0); 을 넣어서 투명하게 처리해야한다.
파폭에서는 border:none 만 넣어주면 테두리가 사라진다.. 하여간에 이런것들때문에 코드 용량이 늘어난다.

1.iframe.not2 {
2. position:absolute; /*레이어의 빵꾸난 부분을 때울 iframe의 위치를 조절하기위해 필요 */
3. bottom:-3px;
4. left:-3px;
5. z-index:-99; /*음수값을 줘서 기존 레이어팝업보다 뒤에 위치 하도록 한다 */
6. width:340px;
7. height:291px;
8. filter: alpha(opacity=0); /*익스에서 생기는 테두리를 없애주기위해 필요하다 */
9.}




1.<div class="layer-pop" id="popLayer2" style="display:none;">
2. <h3 class="h3-pop"><img src="/html/images/mypage/h3_post.gif" alt="우편번호 검색" /></h3>
3. :
4. :
5. :
6. <iframe class="not2" title="내용 없는 프레임"></iframe>
7.</div>


레이어팝업의 가장 바깥 div 위에다가 iframe 코드를 넣준다.. 그리고 두뇌 회전을 빨리 해서,
필요한 길이와 높이, 위치값을 정확하게 계산해서 css에 넣고 익스 6에서 테스트를 한다.
접근성 차원에서 iframe title에다가도 간단한 문구를 넣준다.

이 포스트 공유하기

전체목록