묻고답하기
제로보드 메인 페이지식 로그인창 만들기?
2010.08.22 18:05
질문이 있습니다.
제로보드 식으로 로그인창을 만드려고 합니다.
레이어가 뜨고 그 위에 로그인 창이 나오는 식이죠
문제는 지금 메인에 로그인 위젯을 사용하고 있는데..
메인에 로그인이라는 글을 누르면 레이어가 block 되는 형식입니다.
하지만 로그인 위젯이랑
메인의 div 프레임이랑 연동이 되지 않습니다.
이런 경우에는 어떻게 연동을 시켜주는지 궁금합니다.
경험자분의 답변 부탁드립니다.
간단한 소스가 추가되면 더 좋을 것 같네요.
댓글 2
-
mindpainter
2010.08.23 11:16
-
다레사마
2010.08.24 14:51
xe보드를 좀 공부해보셨으면 아시겠지만 레이아웃을 편집하는 부분이 있습니다. html과 css부분으로 나뉘어있는데.. 현재 사용하는 위젯을 일단 사용한후 페이지를 보시고 소스보기로 그부분 클래스를 잡아냅니다. 그리고 display:none 시키세요. 그리고 html 편집부분에 해당 div영역을 하나 잡아서 필요한 요소만 뽑아다 넣고 스타일을 재정의하세요. 그럼 해결되실거 같네요 ^^
1. 로그인 버튼 링크
<a href="#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L">로그인</a>
2. layout.html 문서 제일 하단에 추가
<!--@if(!$is_logged)-->
{@ $member_config = MemberModel::getMemberConfig(); }
<!--%import("./filter/login.xml")-->
<!--@if($member_config->enable_openid=='Y')--><!--%import("./filter/openid_login.xml")--><!--@end-->
<!-- loginWindow -->
<div id="loginWindow" class="loginWindow">
<!-- class="loginWindow" | class="loginWindow open" -->
<span class="modalWindow"></span>
<div id="loginLayer" class="loginLayer loginTypeA">
<!-- class="loginLayer loginTypeA" | class="loginLayer loginTypeB" -->
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
<form action="" method="post" class="typeA" id="commonLogin" onsubmit="return procFilter(this, login)">
<fieldset>
<legend>XE Login</legend>
<dl>
<dt><label for="uid">{$lang->user_id}</label></dt>
<dd><input name="user_id" type="text" class="inputText" id="uid" /></dd>
<dt><label for="upw">{$lang->password}</label></dt>
<dd><input name="password" type="password" class="inputText" id="upw" /></dd>
</dl>
<p class="keep"><input name="keep_signed" type="checkbox" id="keepA" value="Y" class="inputCheck" onclick="if(this.checked) return confirm('{$lang->about_keep_signed}');"/><label for="keepA">{$lang->keep_signed}</label></p>
<span class="loginButton"><input name="" type="submit" value="{$lang->cmd_login}" /></span>
</fieldset>
</form>
<!--@if($member_config->enable_openid=='Y')-->
<form action="./" method="post" class="typeB" id="openidLogin" onsubmit="return procFilter(this, openid_login)">
<fieldset>
<legend>OpenID Login</legend>
<dl>
<dt><label for="oid">Open ID</label></dt>
<dd><input name="openid" type="text" class="inputText" id="oid" /></dd>
</dl>
<span class="loginButton"><input name="" type="submit" value="{$lang->cmd_login}" /></span>
</fieldset>
</form>
<!--@end-->
<ul class="help">
<li class="join"><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li class="find"><a href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
<li class="find"><a href="{getUrl('act','dispMemberResendAuthMail'+ '+ ')}">{$lang->cmd_resend_auth_mail}</a></li>
<!--@if($member_config->enable_openid=='Y')-->
<li class="typeA"><a href="#openidLogin" onclick="document.getElementById('loginLayer').className='loginLayer loginTypeB'">OpenID</a></li>
<li class="typeB"><a href="#commonLogin" onclick="document.getElementById('loginLayer').className='loginLayer loginTypeA'">OpenID</a></li>
<!--@end-->
</ul>
<button type="button" class="close" onclick="document.getElementById('loginWindow').style.display='none'" accesskey="X"><span>Close Login Layer</span></button>
</div>
</div>
<!-- /loginWindow -->
<!--@end-->
3. css 파일에 추가
.loginWindow{ display:none; position:fixed; left:0; top:0; _position:absolute; width:100%; height:100%; z-index:100;}
.loginWindow.open{ display:block;}
.loginWindow .modalWindow{ display:block; position:fixed; border:0; left:0; top:0; _position:absolute; width:100%; height:100%; background:#000; opacity:.3; filter:alpha(opacity:30);}
.loginWindow .loginLayer{ position:absolute; width:289px; top:120px; left:50%; padding:30px; border:2px solid #737373; margin:0 0 0 -175px; background:#fff;}
.loginWindow .loginLayer form{ display:none; *zoom:1; margin:0 0 29px 0;}
.loginWindow .loginLayer form:after{ content:""; display:block; clear:both;}
.loginWindow .loginLayer form legend{ position:absolute; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden;}
.loginWindow .loginLayer fieldset{ border:0; margin:0; padding:0;}
.loginWindow .loginLayer.loginTypeA form.typeA,
.loginWindow .loginLayer.loginTypeB form.typeB{ display:block;}
.loginWindow .loginLayer dl{ margin:0; padding:0 0 1px 0;}
.loginWindow .loginLayer dt{ font-size:12px; font-weight:bold; color:#868d95; margin:0 0 2px 0;}
.loginWindow .loginLayer dd{ margin:0 0 21px 0;}
.loginWindow .loginLayer .inputText{ width:269px; height:31px; padding:6px 9px 0 9px; border:1px solid #ddd; font:20px Tahoma; color:#333;}
.loginWindow .loginLayer .inputText:focus{ background-color:#fbfbfb;}
.loginWindow .loginLayer .inputCheck{ margin:0 3px 0 0; width:13px; height:13px; vertical-align:middle;}
.loginWindow .loginLayer.loginTypeA .inputText{ background-image:url(../img/bgLoginText.gif)undefinedundefinedundefinedundefinedundefined; background-repeat:no-repeat; background-position:right top;}
.loginWindow .loginLayer.loginTypeB .inputText{ background-image:url(../img/bgOpenidText.gif)undefinedundefinedundefinedundefinedundefined; background-repeat:no-repeat; background-position:right top; padding:6px 9px 0 35px; width:243px;}
.loginWindow .loginLayer .keep{ margin:0; float:left; font-size:11px; line-height:normal; white-space:nowrap;}
.loginWindow .loginLayer .keep label{ color:#555;}
.loginWindow .loginLayer .loginButton,
.loginWindow .loginLayer .loginButton input{ position:relative; border:0; color:#fff; font-size:12px; font-weight:bold; display:inline-block; height:36px; line-height:36px; background-color:transparent; background-image:url(../img/buttonLoginAction.gif)undefinedundefinedundefinedundefinedundefined; background-repeat:no-repeat; overflow:visible;}
.loginWindow .loginLayer .loginButton{ float:right; background-position:0 0; right:11px;}
.loginWindow .loginLayer .loginButton input{ left:11px; background-position:right 0; padding:0 30px 0 45px; cursor:pointer;}
.loginWindow .loginLayer .help{ margin:0 -30px -30px -30px; padding:14px 0; list-style:none; text-align:center; background:#fafafa; border-top:1px solid #f2f2f2;}
.loginWindow .loginLayer .help li{ display:inline; font-size:11px; line-height:11px; padding:0 0 0 5px;}
.loginWindow .loginLayer .help li.join{ font-weight:bold;}
.loginWindow .loginLayer .help li.find{ border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer .help li.typeA,
.loginWindow .loginLayer .help li.typeB{ display:none; border-left:1px solid #b3b3b3;}
.loginWindow .loginLayer.loginTypeA .help li.typeA,
.loginWindow .loginLayer.loginTypeB .help li.typeB{ display:inline;}
.loginWindow .loginLayer .help li a{ text-decoration:none; color:#555;}
.loginWindow .loginLayer .help li a:hover,
.loginWindow .loginLayer .help li a:active,
.loginWindow .loginLayer .help li a:focus{ text-decoration:underline;}
.loginWindow .loginLayer .close{ position:absolute; cursor:pointer; border:0; padding:0; top:0; right:0; width:27px; height:27px; background:transparent url(../img/buttonCloseX.gif) no-repeat center center;}
.loginWindow .loginLayer .close span{ position:absolute; font-size:0; line-height:0; width:0; height:.; overflow:hidden; visibility:hidden;}
4. 해당 레이아웃 스킨/img/ 안에 이미지 추가 (파일첨부 해놨습니다.)