묻고답하기
제로보드 메인 페이지식 로그인창 만들기?
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영역을 하나 잡아서 필요한 요소만 뽑아다 넣고 스타일을 재정의하세요. 그럼 해결되실거 같네요 ^^
| 글쓴이 | 제목 | 최종 글 |
|---|---|---|
| XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
| 모노로그 | 상단에 공백을 없애고 싶습니다. [1] | 2009.06.26 by 글쓴이 |
| 글쓴이 |
xe1.2.4 버전을 업데이트하니 관리자모드에 로그인이 않됩니다.
[1]
 | 2009.06.26 by benkeii |
| 글쓴이 | 회원가입이 되질 않습니다 | |
| 글쓴이 | 제로보드4처럼.. [2] | 2009.06.26 by 글쓴이 |
| 글쓴이 | 물어볼게 몇가지 있습니다 [2] | 2009.06.26 by 글쓴이 |
| 권수주 |
sqlite를 이용하는데 메뉴에 추가하여도 추가 항목이 안나타납니다.
| |
| 민트여우 |
인기글 있잖아요 어디에다 넣으면 되는걸까요?
| |
| 이정진820 | svn 명령어 실행시... [3] | 2009.06.26 by 이정진820 |
| sbshs77 | 버그신고가 안보여서.. Captcha 애드온 1.2.4미작동 저만그런가요?? [1] | 2009.06.26 by 글쓴이 |
| 현진2 |
도와주세요,게시판 제목이 한,영 수평이 안맞어요
| |
| 아주가끔은 | 관리자로 로그인이 안됩니다. [2] | 2009.06.26 by 아주가끔은 |
| 아주가끔은 | 세션 관리자(session) 모듈의 업데이트가 안됩니다. [4] | 2009.06.26 by 아주가끔은 |
| 달콩이 | 기본 위젯으로 인기글이 있었는데 이번 버전에서 사라졌나요? [2] | 2009.06.26 by SMaker |
| 모노로그 | 예전 사이트의 글들은 다 사라진건가요? | |
| 서유비 | 셋팅에 시작모듈 건드린 결과.. 도와주세요.. [1] | 2009.06.26 by 비나무 |
| 초록배추 | 게시판 질문 [1] | 2009.06.26 by 비나무 |
| 글쓴이 | 컨텐츠 인코딩 오류 메시지 [1] | 2009.06.26 by 비나무 |
| narawiz | 트랙백 링크가... [2] [3] | 2009.06.26 by narawiz |
| gsaram |
긴급! 컨텐츠 인코딩 오류! 도와주세요
[1]
| 2009.06.26 by 비나무 |
| piasol | 중복회원가입을 막을 방법은 절대 없는가... [1] | 2009.06.26 by 비나무 |
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/ 안에 이미지 추가 (파일첨부 해놨습니다.)