Help Center
카페24 소식
[스마트디자인] '아이디중복확인' 레이어팝업 변경 안내
2014-01-15
안녕하세요, 카페24 운영도우미 입니다.
인터넷 설정에 따라 사이트 팝업창이 차단되거나,
윈도우8.1에서 IE(인터넷 익스플로어)11 버전은 자동 차단시키는 문제를 해결하기 위해
회원가입 '아이디중복확인' 팝업창을 레이어팝업창으로 변경할 수 있도록 기능이 개선되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-01-15 (수)
■ 업데이트 내용
- 기존 : [아이디중복확인] 버튼 클릭 시, 팝업창으로 열림
- 변경 : [아이디중복확인] 버튼 클릭 시, 레이어팝업창으로 열림
(레이어팝업창 : 새창이 아닌 현재 띄워져있는 화면에서 창을 띄움)
해당 기능은 아래의 안내에 따라 HTML을 추가해주셔야 정상적으로 적용 및 사용이 가능합니다.
1. CSS 수정
- 위치 : CSS > 모듈(module) > 회원(member) > checked.css
▼ 변경 전
#popup { width:500px; }
.header { height:77px; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/bg_popup_header.gif") 0 0 repeat-x; }
.header h1 { height:49px; padding:0 0 0 33px; font-size:20px; line-height:49px; color:#fefefe; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/ico_popup_title.gif") 20px center no-repeat; }
.content { padding:0 22px 22px; }
.content .btnArea { overflow:hidden; padding:20px 0 0; text-align:right; }
.content .btnArea.center { text-align:center; }.content .btnArea span.left { float:left; }
.xans-member-checkid { font-size:11px; }
.xans-member-checkid fieldset { display:block; }
.xans-member-checkid fieldset input { width:100px; padding:2px 2px 2px 4px; border:1px solid #d9d9d9; color:#202020; }
.xans-member-checkid fieldset p { margin:0 0 20px; color:#f26522; }
.xans-member-checkid ul { margin:20px 0 0; }
.xans-member-checkid li { margin:2px 0 0; }
▼ 변경 후
.xans-member-checkid h1 { height:39px; padding:0 35px 0 19px; color:#fefefe; font-size:14px; line-height:39px; background-color:#666; }
.xans-member-checkid .content { padding:28px 30px 70px; }
.xans-member-checkid .close { position:absolute; right:14px; top:12px; }
.xans-member-checkid .close img { cursor:pointer; }
.xans-member-checkid .btnArea { position:fixed; left:0; bottom:0; width:100%; padding:10px 0; border-top:1px solid #c7ccd2; text-align:center; background:#e5e5e5; }
.xans-member-checkid fieldset { display:block; }
.xans-member-checkid fieldset p { margin:0 0 15px; color:#80aeef; }
.xans-member-checkid fieldset input { width:130px; padding:2px 2px 2px 4px; border:1px solid #d9d9d9; color:#202020; }
.xans-member-checkid ul { margin:18px 0 0; line-height:20px; color:#747474; }
2. 아이디중복확인 수정
- 위치 : 회원(member) > 아이디중복확인(check_id.html)
▼ 기존소스
!--@layout(/layout/basic/popup.html)--
<div module="member_checkId">
!--@css(/css/module/member/checkid.css)--
<div class="header">
<h1>아이디 중복확인</h1>
</div>
<div class="content">
<fieldset>
<legend>아이디 중복확인</legend>
<p>아이디는 영문(소문자), 숫자로 4-16자 이내로 입력해 주세요.</p>
{$form.member_id}
<a href="#none" onclick="{$action_check_id}"><img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_check2.gif" alt="중복확인" /></a>
</fieldset>
<ul>
<li class="{$display_desc|display}">공백 또는 특수문자가 포함된 아이디는 사용할 수 없습니다.</li>
<li class="{$display_desc|display}">숫자로 시작하거나, 숫자로만 이루어진 아이디는 사용할 수 없습니다.</li>
<li class="{$display_able|display}">{$member_id}는 사용 가능한 아이디입니다. </li>
<li class="{$display_unable|display}">{$member_id}는 이미 사용중인 아이디입니다. </li>
<li class="{$display_out|display}">{$member_id}는 탈퇴한 아이디입니다. </li>
</ul>
<div class="btnArea">
<a href="#none" onclick="{$action_use_id}"><img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_use.gif" alt="사용하기" /></a>
</div>
</div>
</div>
▼ 변경 후
!--@layout(/layout/basic/popup.html)--
<div module="member_checkId">
!--@css(/css/module/member/checkid.css)--
<h1>아이디 중복확인</h1>
<div class="content">
<fieldset>
<legend>아이디 중복확인</legend>
<p>아이디는 영문(소문자), 숫자로 4~16자 이내로 입력해 주세요.</p>
{$form.member_id}
<a href="#none" onclick="{$action_check_id}"><img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_check2.gif" alt="중복확인" /></a>
</fieldset>
<ul>
<li class="{$display_desc|display}">공백 또는 특수문자가 포함된 아이디는 사용할 수 없습니다.</li>
<li class="{$display_desc|display}">숫자로 시작하거나, 숫자로만 이루어진 아이디는 사용할 수 없습니다.</li>
<li class="{$display_able|display}">{$member_id}는 사용 가능한 아이디입니다. </li>
<li class="{$display_unable|display}">{$member_id}는 이미 사용중인 아이디입니다. </li>
<li class="{$display_out|display}">{$member_id}는 탈퇴한 아이디입니다. </li>
</ul>
</div>
<div class="btnArea">
<a href="#none" onclick="{$action_use_id}"><img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_use2.gif" alt="사용하기" /></a>
</div>
<div class="close"><a href="#none" onclick="{$close_layer}"><img src="http://img.echosting.cafe24.com/design/skin/default/common/btn_close.gif" alt="닫기" /></a></div></div>
3. 회원가입
- 회원(member) > 회원가입(join.html)
▼ 변경 전
## 상단 생략 ##
<tbody>
<tr>
<th scope="row">아이디</th>
<td>{$form.member_id}
<a href="#none" title="새창 열기" onclick="{$action_check_id}">
<img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_overlap_id.gif" alt="아이디 중복확인" /></a> (영문소문자/숫자, 4~16자)</td> </tr>
## 하단 생략 ##
▼ 변경 후
## 상단 생략 ##
<tbody>
<tr>
<th scope="row">아이디</th>
<td>{$form.member_id} <a href="#none" title="새창 열기" onclick="{$action_check_id_layer}">
<img src="http://img.echosting.cafe24.com/design/skin/default/member/btn_overlap_id.gif" alt="아이디 중복확인" /></a> (영문소문자/숫자, 4~16자)</td> </tr>
## 하단 생략 ##
※ '아이디중복확인' 팝업창 외에 다른 기능의 팝업창은 순차적으로 변경 예정에 있으며,
추가 개선 시 공지를 통해 안내 드리겠습니다.
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]