로그인 클릭시 새창이 뜨는 방식 문의드려요.
현재 레이아웃은 청와통닭 사용중인데요, 상단의 로그인 클릭하면 메인 페이지의 중간에
로그인 폼이 출력이 되는데요, 상.하에 위젯이 나와서 좀 어수선하게 보이는데 이걸 새창(?)에 띄우는 방법이
있을까요?
이곳 엑스이타운처럼 소셜로그인은 아니라도 로그인 크릭시 새창을 띄워서 로그인 할 수 있는 애드온이나 기타
다른 방법이 있을까요?
고맙습니다.
현재 레이아웃은 청와통닭 사용중인데요, 상단의 로그인 클릭하면 메인 페이지의 중간에
로그인 폼이 출력이 되는데요, 상.하에 위젯이 나와서 좀 어수선하게 보이는데 이걸 새창(?)에 띄우는 방법이
있을까요?
이곳 엑스이타운처럼 소셜로그인은 아니라도 로그인 크릭시 새창을 띄워서 로그인 할 수 있는 애드온이나 기타
다른 방법이 있을까요?
고맙습니다.
댓글 14
저한테는 쉽지 않은 작업인것 같아요. ㅜ.ㅜ
고맙습니다. layout.html 파일을 찾아서 수정을 해봐야겠네요. F12 눌러서 이 링크로 테스트 걸었을때 기존의
화면과 같으네요. 단지 새탭이 열리고..
저는 target="_balnk" 이거 밖에 몰라서.. ㅎㅎ 소셜XE 같은 모듈을 사용해야 되는건가봐요.
제가 해보고 싶은건 아래 화면처럼 뜨는거였거든요. xedition 레이아웃 처럼요.
xedition 레이아웃의 로그인팝업을 그대로 복사하셔서 넣으세요.
팝업이 나타날 수 있도록 선택자 태그이름을 를 넣어주시면 됩니다.
아래 소스에 청와통닭 선택자 태그를 넣어두었습니다.
아래코드를 복사해서 사용해보세요.
아울러 css는 직접 xedition 레이아웃에서 청와통닭 레이아웃으로 경로에 맞추어 업로드하세요.
<section cond="$layout_info->use_login_widget != 'N'" class="login_widget" style="display:none"|cond="$XE_VALIDATOR_ID != 'layouts/xedition/layout/1' || !$XE_VALIDATOR_MESSAGE">
<load target="./css/widget.login.css" />
<div class="ly_dimmed"></div>
<div class="signin">
<div class="login-header">
<h1>LOGIN</h1>
</div>
<div class="login-body">
<form action="{getUrl('', 'act', 'procMemberLogin')}" method="post" autocomplete="off">
<input type="hidden" name="act" value="procMemberLogin" />
<input type="hidden" name="success_return_url" value="{getCurrentPageUrl()}" />
<input type="hidden" name="xe_validator_id" value="layouts/xedition/layout/1" />
<fieldset>
<legend class="blind">{$lang->cmd_login}</legend>
<div class="control-group">
<div class="group">
<input type="<!--@if($member_config->identifier != 'email_address')-->text<!--@else-->email<!--@end-->" name="user_id" id="uemail" required="required" />
<span class="highlight"></span>
<span class="bar"></span>
<label class="info_label" for="uemail"><!--@if($member_config->identifier != 'email_address')-->{$lang->user_id}<!--@else-->{$lang->email_address}<!--@end--></label>
</div>
<div class="group">
<input type="password" name="password" id="upw" required="required" />
<span class="highlight"></span>
<span class="bar"></span>
<label class="info_label" for="upw">{$lang->password}</label>
</div>
</div>
<div cond="$XE_VALIDATOR_ID == 'layouts/xedition/layout/1' && $XE_VALIDATOR_MESSAGE" class="control-group">
<p class="error">{$XE_VALIDATOR_MESSAGE}</p>
</div>
<div class="control-group">
<label class="chk_label" for="keepid_opt">
<input type="checkbox" name="keep_signed" id="keepid_opt" value="Y" />
<span class="checkbox"></span> {$lang->keep_signed}
</label>
<div id="warning">
<p style="text-align:right;"><i class="xi-close"></i></p>
<p>{str_replace('\n\n', '<br />', $lang->about_keep_signed)}</p>
<div class="edge"></div>
</div>
<button type="submit" class="btn_submit">{$lang->cmd_login}</button>
</div>
</fieldset>
</form>
</div>
<div class="login-footer">
<a href="{getUrl('act', 'dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a>
<span class="f_bar">|</span>
<a href="{getUrl('act', 'dispMemberSignUpForm')}">{$lang->cmd_signup}</a>
</div>
<a href="#" class="btn_ly_popup"><span class="blind">닫기</span></a>
</div>
<script>
jQuery(function ($) {
var keep_msg = $("#warning");
$(".chk_label").on("mouseenter mouseleave focusin focusout", function (e) {
if(e.type == "mouseenter" || e.type == "focusin") {
keep_msg.show();
}
else {
keep_msg.hide();
}
});
$("#ly_login_btn, #ly_btn, .act_login login_A").click(function () {
$(".login_widget").show();
return false;
});
$(".btn_ly_popup").click(function () {
$(".login_widget").hide();
return false;
});
$("input").blur(function () {
var $this = $(this);
if ($this.val()) {
$this.addClass("used");
}
else {
$this.removeClass("used");
}
});
});
</script>
</section>
<!-- /Login widget -->
항상 고맙습니다. 은혜 잊지 않을게요. ^^
착한인연님 수고많이 하셨는데.... 역시 저는 밥을 떠 먹여줘도 입을 못 벌리네요. ㅜ.ㅜ
청와통닭 layout.html 파일내 아래와 같이 로그인 하는 부분이 있는데, 이건 만지지 않고 그냥 두고
올려주신 소스를 청와통닭 layout.html 파일내의 아랫부분에 붙여 넣고, 위의 3행의 load target ./css/widget.login.css
파일은 청와통닭 css 폴더에 복사해서 넣었는데 결국 로그인을 클릭했을 때 기존의 방식대로 페이지 내에 표시가 되네요.
제대로 이해를 못해서 미안합니다. ㅜ.ㅜ
<div class="account">
<ul class="clearBoth wrap_login">
<block cond="$is_logged">
<li class="first_login"><a class="login_A" href="{getUrl('act','dispMemberLogout')}">{$lang->cmd_logout}</a></li>
<li><a class="login_A" href="{getUrl('act','dispMemberInfo')}">{$lang->cmd_view_member_info}</a></li>
<li cond="$logged_info->is_admin=='Y' && !$site_module_info->site_srl"><a class="login_A" href="{getUrl('','module','admin')}">{$lang->cmd_management}</a></li>
</block>
<block cond="!$is_logged">
<li class="first_login"><a class="act_login login_A" href="{getUrl('act', 'dispMemberLoginForm')}">{$lang->cmd_login}</a></li>
<li><a class="login_A" href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a></li>
<li><a class="login_A" href="{getUrl('act','dispMemberFindAccount')}">{$lang->cmd_find_member_account}</a></li>
</block>
</ul>
</div>
</div>
</div>
<!-- 우상단 로그인 끝 -->
제가 붙은 텍스트인지 알고 그냥 선택자를 넣어버렸네요. 안보고 그냥 넣었네요.
제가 드린 스크립터에서 아래빨강 부분을 지우세요
$("#ly_login_btn, #ly_btn, .act_login login_A").click(function () {
아래와 같이 수정하시고 그리고 설치된 레이아웃 들어가셔서 편집 누르시고 초기화 누시면 됩니다.
$("#ly_login_btn, #ly_btn, .act_login").click(function () {
아울러 css는 복사하였지만 버튼이미지(btn_close.png)도 함께 복사해주셔야 합니다.
사이트 디자인 설정 - HTML/CSS 설정 - layout.html 파일에서 말씀대로 했더니 즉시 반영이 되는데요,
layout.html 파일을 별도로 열어서 드림위버나 다른 편집툴에서 수정을 해서 청와통닭 레이아웃
폴더에 layout.html 파일을 아무리 덮어도 되지가 않던데 왜 그런가요?
꼭 수정을 사이트 관리자 모드의 HTML/CSS 설정 에서만 수정을 해야 되는건가요?
레이아웃정보가 캐쉬됩니다.
저는 레이아웃을 파일을 바로 수정적용을 위하여
layout.html파일안에는 아래와 같이 적용되어 사용합니다.
<include target="_layout.html" />
위와 같이 처리할 경우 해당파일을 무조건 읽어들이는 방식으로 합니다.
고맙습니다.