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



프리랜서 웹디자이너 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
           
검색    글쓰기
번호 제 목 작성자 작성일 조회수
중요 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
중요 [소스] 메뉴바 UI 소스1 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.04.02 3665
중요 [소스] jquery 달력 Datepicker  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.11.02 2953
중요 [소스] 기존 a 태그 href를 이용하여 부드럽게 스크롤 이동하기 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2017.02.10 73
중요 [소스] [소스] 메뉴바 UI 소스2 (반응형)  이미지 파일이 첨부되어 있습니다. 꿘쓰 2016.07.19 6077
중요 [기타] 구글맵 플랫폼  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.22 4631
중요 [소스] 구글맵 반경 검색 작성글은 비공개로 설정 되었습니다.  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.08 17
중요 [소스] 구글맵 이동 경로 표시  이미지 파일이 첨부되어 있습니다. 꿘쓰 2018.01.18 5103
중요 [소스] 구글맵 좌표값 구하기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2019.01.08 3374
중요 [소스] 구글맵 웹사이트 띄우기  이미지 파일이 첨부되어 있습니다. 꿘쓰 2013.01.02 21875
중요 [소스] 제시어기능 자동완성 검색  이미지 파일이 첨부되어 있습니다. 꿘쓰 2011.05.18 2438
232 [소스] 슬라이드 배너 Swiper Slide 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.06 0
231 [소스] gnb 메뉴 작성글은 비공개로 설정 되었습니다. 꿘쓰 2021.04.02 0
230 [소스] 자바스크립트 이미지변경 예제 innerHTML, setAttribute 이해  이미지 파일이 첨부되어 있습니다. 꿘쓰 2021.03.16 334
229 [소스] Mouse Scroll Dwon 꿘쓰 2021.03.08 146
228 [기타] innerHTML 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.11.16 0
227 [소스] 마우스 롤오버 효과 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.30 2
226 [기타] 퍼센트 계산, 백분율 계산 방식 꿘쓰 2020.06.22 351
225 [소스] Window.scroll() 꿘쓰 2020.06.22 280
224 [소스] scrollLeft(), scrollTop() 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.15 0
223 [소스] 숫자 카운트 1 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.06.03 2
222 [CSS] 그라데이션 자동 생성 사이트 꿘쓰 2020.11.12 274
221 [CSS] flex-wrap:wrap 작성글은 비공개로 설정 되었습니다. 꿘쓰 2020.05.29 0
220 [SCRIPT] 자바스크립트 number_format 숫자 콤마 제이쿼리 꿘쓰 2019.12.03 343
219 [소스] 구글 로그인 API 자바스크립트 꿘쓰 2019.08.16 683
218 [JQUERY] 체크박스 체크 유무 jquery 꿘쓰 2019.07.23 563
217 [CSS] css webkit, moz, ms, o 의미 꿘쓰 2019.04.16 742
216 [HTML] HTML5 Canvers 태그 꿘쓰 2019.03.22 882
215 [기타] 카카오 상담톡 비즈니스 메신져 꿘쓰 2019.03.21 821
214 [기타] a태그 onclick 클릭 이벤트 차이점 꿘쓰 2019.03.13 1109
213 [소스] 카카오 로그인 작성글은 비공개로 설정 되었습니다. 꿘쓰 2019.03.08 1