묻고답하기
제로보드 메인 페이지식 로그인창 만들기?
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 남기남 |
| 오성훈508 | 이거 다시 한번 봐주세요... [2] | 2009.01.24 by wow power leveling |
| 유지은 | 홈페이지 분양관련 질문 좀 드릴께요. | |
| 독수리오형제 | 제로보드 첨부시 이런 에러 메시지가~~~ | |
| 유월이 | XE를 처음 이용하는데 어려운 점이 많아서…… [2] | 2009.01.24 by wow power leveling |
| 까마구 | 시간표시 질문 | |
| nuzz | geturl 어떻게 고쳐야 할가요? [4] | 2009.01.22 by nuzz |
| 제보공부중 | 기본 게시판에 댓글과 댓글사이 경계선 변경 [3] | 2009.01.22 by 제보공부중 |
| 만쓰별(정만) | 메뉴 개별 호출 함수 알 수 있을까요? | |
| 미눙 | css 레이아웃 제가 뭐가 틀린건지요...? [6] | 2009.01.22 by 미눙 |
| 제로왕초보 | 큰 사진 첨부때문에 웹진/갤러리가 에러나는데 서버 에러메세지 안 나오나요? [1] | 2009.01.24 by wow power leveling |
| 강현수 | index.html 파일에 최근 글 목록 위젯 추가가 안됩니다. | |
| dusskapark | 이슈 크래커를 쓰는 법 질문입니다. | |
| 정윤수340 | 게시판 첨부파일 관련 [3] | 2009.01.22 by 정윤수340 |
| ㅇ | 메뉴 제대로 추가했는데 디폴트페이지로 가버립니다. [1] | 2009.01.22 by 백성찬 |
| 제보공부중 | 게시판 기본 레이아웃에서 일부 문자 추가 [1] | 2009.01.22 by 궁금이2 |
| 네버엔딩 | 계정이전시 퍼미션을 어떻게 줘야 하나요? [2] | 2009.01.22 by 네버엔딩 |
| 네버엔딩 | 계정이전은 다했는데 로그인이 안됩니다... [1] | 2009.01.22 by 만쓰별(정만) |
| 튀긴건빵 | 1.1.5 버전 svn 업했는데 홈피가 안뜨네요 ;;; [2] | 2009.01.22 by 튀긴건빵 |
| monul | 추천인 제도 넣고싶은데.... | |
| dusskapark | 갑자기 탭형 최신게시물에서..오류발생.. [3] | 2009.01.22 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/ 안에 이미지 추가 (파일첨부 해놨습니다.)