Help Center
카페24 소식
[디자인관리] 쇼핑몰 팝업창 레이어 형태로 변경 기능 개선 안내
2014-03-20
안녕하세요, 카페24 운영도우미 입니다.
인터넷 설정에 따라 사이트 팝업창이 차단되거나, 윈도우8.1에서 IE(인터넷익스프롤러)11버전을
자동 차단시키는 문제를 해결하기 위하여,
기존 팝업창을 레이어팝업창으로 변경할 수 있도록 기능이 개선되었습니다.
자세한 내용은 아래를 참조해주세요.
회원가입과 주문서 작성 화면에서 띄우는 ‘아이디중복찾기, 우편번호찾기, 배송지선택, 쿠폰선택’
팝업창을 레이어팝업창 형태로 변경할 수 있습니다.
- 팝업창 : 기능 버튼을 클릭하면 새창을 띄움
- 레이어팝업창 : 기능 버튼을 클릭하면 새창이 아닌 현재 띄워져있는 화면에서 창을 띄움
해당 기능은 아래의 안내에 따라 HTML을 수정하시면 정상적으로 적용 및 사용이 가능합니다.
1. 회원관련 화면
1) 디자인 > HTML디자인설정 > 회원관련화면 > 회원가입/수정 > 회원가입/수정 입력폼(c_3)
[기존소스]
|
## 상단 생략 ## {{if $is_display_id_check == "block"}} {{else}} ## 중간 생략 ## <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:hand" alt=""> ## 하단 생략 ## |
[변경소스]
- 빨간색영역은 위 기존소스를 수정해주시고, 파란색영역은 맨하단에 소스를 추가해주세요.
|
## 상단 생략 ## {{if $is_display_id_check == "block"}} {{else}} ## 중간 생략 ## <img src="{$img_array.c_3.8.url}" name="image" align="absmiddle" border="0" onclick="zipcode_search()" style="cursor:hand" alt=""> ## 하단 생략 ## <!-- 아이디 찾기 --> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> <!-- 우편번호 찾기 --> <div class="layer" id="zipcode_search" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:455px; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <div class="iframeArea"> <iframe id="zipcode_search_src" src="" border="0" scrolling="auto" width="450" height="450"></iframe></div> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> |
2) 디자인 > HTML디자인설정 > 회원관련화면 > 아이디중복확인 > 전체페이지(c_1)
[기존소스]
|
## 상단 생략 ## <img src="{{$img_array.c_1.6.url}}" border="0" hspace="2" onclick="javascript:self.close()" style="cursor:hand" alt=""> ## 하단 생략 ## |
[변경소스]
|
## 상단 생략 ## <img src="{{$img_array.c_1.6.url}}" border="0" hspace="2" onclick="javascript:closeLayerIdCheck()" style="cursor:hand" alt=""> ## 하단 생략 ## |
3) 디자인 > HTML디자인설정 > 회원관련화면 > 우편번호찾기 > 우편번호검색(c_1)
[기존소스]
|
## 상단 생략 ## <img src="{{$img_array.c_1.7.url}}" border="0" hspace="10" style="cursor:hand" onclick="javascript:self.close()" alt="창닫기"> ## 하단 생략 ## |
[변경소스]
|
## 상단 생략 ## <img src="{{$img_array.c_1.7.url}}" border="0" hspace="10" style="cursor:hand" onclick="javascript:closeLayerCommon()" alt="창닫기"> ## 하단 생략 ## |
4) 디자인 > HTML디자인설정 > 회원관련화면 > 우편번호찾기 > 우편번호검색 [유닛] 선택 > 검색결과(u1t)
[기존소스]
|
<tr bgcolor="{$tab_array.c_1.td_bgcolor}"> <td align="center">[{$zipcode.zipcode}]</td><td class="txt_pro"><a href="javascript:set_zipcode( opener.frm, '{$zipcode.zipcode}', '{$zipcode.addr}' )">{$zipcode.addr} {$zipcode.bunji}</a></td></tr> |
[변경소스]
| <tr bgcolor="{$tab_array.c_1.td_bgcolor}"> <td align="center">[{$zipcode.zipcode}]</td> <td class="txt_pro"><a href="javascript:set_zipcode( parent.frm, '{$zipcode.zipcode}', '{$zipcode.addr}' )">{$zipcode.addr} {$zipcode.bunji}</a></td></tr> |
2. 주문관련 화면
1) 디자인 > HTML디자인설정 > 주문관련화면 > 주문서작성 > 주문서작성 페이지(c_3)
▼ 가장 하단에 아래 소스추가
| <!-- 우편번호 찾기 --> <div class="layer" id="zipcode_search" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:455px; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> <div class="iframeArea"> <iframe id="zipcode_search_src" src="" border="0" scrolling="auto" width="450" height="450"></iframe> </div></div> <!-- 배송지 주소 --> <div class="layer" id="dlv_addr" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:806px; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <div class="iframeArea"> <iframe id="dlv_addr_src" src="" border="0" scrolling="auto" width="800" height="700"></iframe> </div> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> <!-- 쿠폰 --> <div class="layer" id="coupon_layer" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:873; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <div class="iframeArea"> <iframe id="coupon_layer_iframe" src="" border="0" scrolling="auto" width="866" height="653"></iframe> </div> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> |
2) 디자인 > HTML디자인설정 > 주문관련화면 > 주문서작성 > 해외배송 주문서작성 페이지(c_4)
▼ 가장 하단에 아래 소스추가
| <!-- 우편번호 찾기 --> <div class="layer" id="zipcode_search" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:455px; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <div class="iframeArea"> <iframe id="zipcode_search_src" src="" border="0" scrolling="auto" width="450" height="450"></iframe> </div> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> |
3) 디자인 > HTML디자인설정 > 주문관련화면 > 배송주소록POPUP > 배송지주소록 POPUP [유닛]선택 >
배송지 등록/수정(u2r)
[기존소스]
| <div style="margin-top:20px; text-align:center;"> <a href="#" onclick="myshopAddrSubmit(); return false;">{{$submit_btn}}</a> <a href="#" onclick="history.back();"> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/button/but_cancel.gif" alt="취소"></a> </a></div></div> |
[변경소스]
| <div style="margin-top:20px; text-align:center;"> <a href="#" onclick="myshopAddrSubmit(); return false;">{{$submit_btn}}</a> <a href="#" onclick="javascript:closeLayerDlv();"> <img src="http://img0001.echosting.cafe24.com/front/type_b/image/button/but_cancel.gif" alt="취소"></a></a></div></div> |
▼ 가장 하단에 아래 소스 추가
| <!-- 우편번호 찾기 --> <div class="layer" id="zipcode_search" style="overflow:hidden; position:absolute; top:50%; left:50%; z-index:1000; width:455px; margin:-200px 0 0 -227px; border:1px solid #7f8186; color:#747474; background:#5a5a5a"> <div class="iframeArea"> <iframe id="zipcode_search_src" src="" border="0" scrolling="auto" width="450" height="450"></iframe> </div> <a href="#none" title="닫기" class="close" onclick="javascript:closeLayer()" style="color:#fff;">X</a> </div> </form> |
4) 디자인 > HTML디자인설정 > 주문관련화면 > 쿠폰선택(New) > 쿠폰선택 타이틀(c_1)
[기존소스]
| <div style="position:relative; height:39px; background:url('{{$img_array.c_1.2.url}}') repeat-x left top"> <div style="float:left"> <img src="{{$img_array.c_1.1.url}}" alt="쿠폰 조회/적용"/><br/> </div> <div style="float:right;margin-top:8px;margin-right:8px"> <img src="{{$img_array.c_1.3.url}}" width="62" height="20" style="cursor:hand" onclick="window.close();" alt="창닫기"/><br/></div></div> |
[변경소스]
| <div style="position:relative; height:39px; background:url('{{$img_array.c_1.2.url}}') repeat-x left top"> <div style="float:left"> <img src="{{$img_array.c_1.1.url}}" alt="쿠폰 조회/적용"/><br/> </div> <div style="float:right;margin-top:8px;margin-right:8px"> <img src="{{$img_array.c_1.3.url}}" width="62" height="20" style="cursor:hand" onclick="javascript:closeLayerCoupon();" alt="창닫기"/><br/></div></div> |
3. 자바스크립트&스타일시트 수정
1) 디자인 > HTML디자인설정 > 메인화면 > [탭] 자바스크립트&스타일시트 > 스타일시트 > common.css
▼ 맨 하단에 아래 소스추가
| .layer { position:absolute; padding:25px 2px 2px; display:none} .layer .close, .layer .close:hover { position:absolute !important; 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디자인설정 > 회원관련화면 > 아이디중복확인 > 자바스크립트&스타일시트탭 >
자바스크립트(id_check.js)
[기존소스]
| function onload_id_focus( id ) { if( !id ) { alert( '사용 할 수 없는 아이디입니다.' ); return false; } opener.frm.is_id_check.value = 'T' opener.frm.member_id.value = id opener.frm.member_id.readOnly = true self.close() } |
[변경소스]
| function onload_id_focus( id ) { if( !id ) { alert( '사용 할 수 없는 아이디입니다.' ); return false; } if (parent.document.getElementById('id_check') != null) { parent.frm.is_id_check.value = 'T' parent.frm.member_id.value = id parent.frm.member_id.readOnly = true parent.document.getElementById('id_check').style.display = "none"; } else { opener.frm.is_id_check.value = 'T' opener.frm.member_id.value = id opener.frm.member_id.readOnly = true self.close() } } function closeLayerIdCheck() { opener ? self.close() : parent.document.getElementById('id_check').style.display = 'none'; } |
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]