프리랜서 웹디자이너 RELATION RELATION.CO.KR

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에다가도 간단한 문구를 넣준다.

이 포스트 공유하기

글수정  글삭제 전체목록
<
 
1
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다. 꿘쓰 2017.02.10 73
중요 [기타] 구글맵 플랫폼 꿘쓰 2019.01.22 3513
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시 꿘쓰 2018.01.18 3516
중요 [소스] 구글맵 좌표값 구하기 꿘쓰 2019.01.08 2171
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 20766
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 57
225 [소스] Window.scroll() 꿘쓰 2020.06.22 61
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 1
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.05.29 95
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 171
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 325
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 351
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 519
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 614
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 589
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 580
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1
212 [소스] 별점주기 꿘쓰 2019.02.21 685
211 [소스] Select option를 버튼(div) 방식으로 변경하기 꿘쓰 2019.02.21 673
210 [소스] 코멘트 게시판 디자인 이미지 테두리 둥글게 하기 (border-radius) 꿘쓰 2019.02.13 876
209 [소스] 아이폰 갤러리 이미지 저장 방지 꿘쓰 2019.01.09 625
208 [CSS] 줄바꿈, URL 줄바꿈을 위한 CSS 꿘쓰 2019.01.04 667