Help Center
카페24 소식
[디자인] 레이어 팝업창 변경 안내
2014-01-22
안녕하세요, 카페24 운영도우미 입니다.
인터넷 설정에 따라 사이트 팝업창이 차단되거나
윈도우8.1에서 IE(인터넷익스프롤러)11버전을 자동 차단시키는 문제를 해결하기 위하여,
팝업창을 레이어 팝업창으로 변경할 수 있도록 기능이 개선되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-01-22 (수)
■ 업데이트 내용
회원가입과 주문서 작성 화면에서 띄우는 '아이디중복찾기, 우편번호찾기, 배송지선택, 쿠폰선택' 팝업창을
레이어팝업창 형태로 변경할 수 있습니다.
- 팝업창 : 기능 버튼을 클릭하면 새창을 띄움
- 레이어팝업창 : 기능 버튼을 클릭하면 새창이 아닌 현재 띄워져있는 화면에서 창을 띄움
해당 기능은 아래의 안내에 따라 HTML을 수정해주셔야 정상적으로 적용 및 사용이 가능합니다.
1. 아이디 중복 체크
1) 디자인 > HTML디자인설정 > 회원관련화면 > 회원가입/수정 > 회원가입/수정 입력폼(c_3)
▼ 기존소스
|
## 상단 생략 ## {{if $is_display_id_check == "block"}} ## 하단 생략 ## |
▼ 변경소스
|
## 상단 생략 ## ## 하단 생략 ## |
2) 디자인 > HTML디자인설정 > 회원관련화면 > 아이디중복확인 > 전체페이지(c_1)
▼ 기존소스
| ## 상단 생략 ## <td align="center" height="30"><img src="{{$img_array.c_1.5.url}}" border="0" hspace="2" onclick="javascript:onload_id_focus( '{{$parent_focus_id}}' )" style="cursor:hand"> <img src="{{$img_array.c_1.6.url}}" border="0" hspace="2" onclick="javascript:self.close()" style="cursor:hand"></td> ## 하단 생략 ## |
▼ 변경소스
| ## 상단 생략 ## <td align="center" height="30"><img src="{{$img_array.c_1.5.url}}" border="0" hspace="2" onclick="apply_id( '{{$parent_focus_id}}' )" style="cursor:hand"> <img src="{{$img_array.c_1.6.url}}" border="0" hspace="2" onclick="closeLayerPopup();" style="cursor:hand"></td> ## 하단 생략 ## |
2. 우편번호 찾기
1) 디자인 > HTML디자인설정 > 회원관련화면 > 회원가입/수정 > 회원가입/수정 입력폼(c_3)
▼ 기존소스
| ## 상단 생략 ## <img src="{$img_array.c_3.8.url}" name="image" align="absmiddle" border="0" onclick="javascript:window_open( '/front/php/zipcode_search/zipcode_search.php?'+'page=member_regist_f&zip1=zip1&zip2=zip2&addrs=addr1&form=frm', 'addr_search' ,200, 100, 466, 450 )" style="cursor:pointer"> </td></tr> <tr><td height="26"> <input type=text size=50 id="addr1" name="addr1" value="{{$addr1}}" class="input01"> 기본주소</td></tr><tr><td height="26"> <input type=text size=50 id="addr2" name="addr2" value="{{$addr2}}" class="input01"> 나머지주소</td></tr></table></td></tr> ## 하단 생략 ## |
▼ 변경소스
| ## 상단 생략 ## <img src="{{$img_array.c_3.8.url}}" name="image" align="absmiddle" border="0" onclick="openZipLayer();" style="cursor:pointer"> </td></tr> <tr><td height="26"> <input type=text size=50 id="addr1" name="addr1" value="{{$addr1}}" class="input01"> 기본주소</td></tr><tr><td height="26"> <input type=text size=50 id="addr2" name="addr2" value="{{$addr2}}" class="input01"> 나머지주소</td></tr></table></td></tr> <!-- 우편번호찾기 레이어 --> <div id="searchZipcode" class="layer" style="display:none; z-index:100; background-color:#5a5a5a"> <div class="iframeArea"> <iframe id="searchZipcodeIframe" width="450px" height="450px" frameborder="0" scrolling="auto" title="아이디 중복체크"></iframe></div> <a href="#none" title="닫기" class="close" style="color:#fff;" onclick="closeLayerPopup('zipcode');">X</a> </div> ## 하단 생략 ## |
2) 디자인 > HTML디자인설정 > 회원관련화면 > 우편번호찾기 > 우편번호검색(c_1)
▼ 기존소스
| ## 상단 생략 ## <td height="20" align="right" width="423"> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/button/but_close02.gif" border="0" hspace="10" style="cursor:hand" onclick="javascript:self.close()" alt="창닫기"></td> ## 하단 생략 ## |
▼ 변경소스
| ## 상단 생략 ## <td height="20" align="right" width="423"> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/button/but_close02.gif" border="0" hspace="10" style="cursor:hand" onclick="closeZipcode();" alt="창닫기"></td> ## 하단 생략 ## |
3) 디자인 > HTML디자인설정 > 회원관련화면 > 우편번호찾기 > 우편번호검색(c_1) > 검색결과(u1t)
▼ 기존소스
| ## 상단 생략 ## <td class="txt_pro" style="cursor:pointer;" onClick="set_zipcode( opener.frm, '{{$zipcode.zipcode}}', '{{$zipcode.addr_input}}' )"> ## 하단 생략 ## |
▼ 변경소스
| ## 상단 생략 ## <td class="txt_pro" style="cursor:pointer;" onClick="set_zipcode('' , '{{$zipcode.zipcode}}', '{{$zipcode.addr_input}}' )"> ## 하단 생략 ## |
3. 주문서
1) 디자인 > HTML디자인설정 >메인화면 메인화면 > (탭)자바스크립트&스타일시트 > common.css
▼ 맨 하단에 아래 소스추가
| ## 상단 생략 ## .layer { position:absolute; padding:25px 2px 2px; } .layer .close, .layer .close:hover { position:absolute; right:2px; top:2px; width:22px; font-weight:bold; font-size:15px; text-align:center; line-height:21px; text-decoration:none; } .layer .close img { border:0; } .layer .iframeArea { background-color:#fff; } |
2) HTML디자인 설정
현재 사용중이신 주문방식에 따라 해당 위치에 아래 소스를 추가해주세요.
- (구)주문 이용 : 디자인 > HTML디자인설정 >주문관련화면 > 주문서작성 > 주문서작성페이지(c_3)
- (뉴)주문 이용 : 디자인 > HTML디자인설정 > NEW주문관련화면 > NEW주문서작성 > 주문서작성페이지(c_3)
- 해외주문 이용 : 디자인 > HTML디자인설정 >주문관련화면 > 주문서작성 > 해외배송주문서작성페이지(c_4)
▼ 맨 하단에 아래 소스추가
| ## 상단 생략 ## <!-- 주문자 우편번호찾기 레이어 --> <div id="oSearchZip" class="layer" style="display:none; z-index:100; background-color:#5a5a5a"> <div class="iframeArea"> <iframe id="oSearchZipIframe" width="467px" height="450" frameborder="0" scrolling="auto" title="주문자 우편번호 찾기"></iframe></div><a href="#none" title="닫기" class="close" style="color:#fff;" onclick="closeLayerPopup('o_zipcode');">X</a> </div> <!-- 수취자 우편번호찾기 레이어 --> <div id="rSearchZip" class="layer" style="display:none; z-index:100; background-color:#5a5a5a"> <div class="iframeArea"> <iframe id="rSearchZipIframe" width="467px" height="450" frameborder="0" scrolling="auto" title="수취자 우편번호 찾기"></iframe></div><a href="#none" title="닫기" class="close" style="color:#fff;" onclick="closeLayerPopup('r_zipcode');">X</a> </div> <!-- 배송지선택 레이어 --> <div id="selectAddr" class="layer" style="display:none; z-index:100; background-color:#5a5a5a"> <div class="iframeArea"> <iframe id="selectAddrIframe" width="630px" height="600px" frameborder="0" scrolling="auto" title="배송지선택 레이어"></iframe></div><a href="#none" title="닫기" class="close" style="color:#fff;" onclick="closeLayerPopup('select_addr');">X</a> </div> <!-- 쿠폰선택 레이어 --> <div id="selectCouponLayer" class="layer" style="display:none; z-index:100; background-color:#5a5a5a"> <div class="iframeArea"> <iframe id="selectCouponIframe" width="877px" height="600px" frameborder="0" scrolling="auto" title="쿠폰선택 레이어"></iframe></div><a href="#none" title="닫기" class="close" style="color:#fff;" onclick="closeLayerPopup('coupon');">X</a></div> |
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]