팝업으로 외부로그인 하는 스킨이나 방법?? 채택완료

참고만 헤 보세요.

출처 : 

https://sir.kr/g5_skin/495

그누보드 기본 외부로그인 스킨의 소스를 가지고 예를 듭니다.

예를 드거니 바로 적용하지 마시길....
대략 아래처럼 구성하면 됩니다.
색상으로 표시된 부분이 꼭 필요한 소스입니다.
나머지는 사용자 스킨에 맞는 것으로 변경하면 될듯싶네요.

외부로그인 스킨폴더 > outlogin.skin.1.php 

<a href="javascript:void(0);" id="outlogin_wrap_open">로그인</a>
<div class="outlogin_wrap">
<div class="outlogin_bg"></div>
<div class="outlogin_wrap_area" id="layer_outlogin">

<section id="ol_before" class="ol">
<h2>회원로그인</h2>
<form name="foutlogin" action="<?php echo $outlogin_action_url ?>" onsubmit="return fhead_submit(this);" method="post" autocomplete="off">
<fieldset>
<div class="ol_wr">
<input type="hidden" name="url" value="<?php echo $outlogin_url ?>">
<label for="ol_id" id="ol_idlabel" class="sound_only">회원아이디<strong>필수</strong></label>
<input type="text" id="ol_id" name="mb_id" required maxlength="20" placeholder="아이디">
<label for="ol_pw" id="ol_pwlabel" class="sound_only">비밀번호<strong>필수</strong></label>
<input type="password" name="mb_password" id="ol_pw" required maxlength="20" placeholder="비밀번호">
<input type="submit" id="ol_submit" value="로그인" class="btn_b02">
</div>
<div class="ol_auto_wr">
<div id="ol_auto">
<input type="checkbox" name="auto_login" value="1" id="auto_login">
<label for="auto_login" id="auto_login_label">자동로그인</label>
</div>
<div id="ol_svc">
<a href="<?php echo G5_BBS_URL ?>/register.php"><b>회원가입</b></a> /
<a href="<?php echo G5_BBS_URL ?>/password_lost.php" id="ol_password_lost">정보찾기</a>
</div>
</div>
<?php
// 소셜로그인 사용시 소셜로그인 버튼
@include_once(get_social_skin_path().'/social_outlogin.skin.1.php');
?>
</fieldset>
</form>
</section>

</div>
</div>

<script>
$omi = $('#ol_id');
$omp = $('#ol_pw');
$omi_label = $('#ol_idlabel');
$omi_label.addClass('ol_idlabel');
$omp_label = $('#ol_pwlabel');
$omp_label.addClass('ol_pwlabel');

$(function() {

$("#auto_login").click(function(){
if ($(this).is(":checked")) {
if(!confirm("자동로그인을 사용하시면 다음부터 회원아이디와 비밀번호를 입력하실 필요가 없습니다.\n\n공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?"))
return false;
}
});
});

function fhead_submit(f)
{
return true;
}
</script>

<script>
$(function($){
function outlogin_wrap_open(el){
//$('.outlogin_wrap').addClass('open');
$('.outlogin_wrap').fadeIn();
var temp = $('#' + el);
if (temp.outerHeight() < $(document).height() ) temp.css('margin-top', '-'+temp.outerHeight()/2+'px');
else temp.css('top', '0px');
if (temp.outerWidth() < $(document).width() ) temp.css('margin-left', '-'+temp.outerWidth()/2+'px');
else temp.css('left', '0px');
}
$('#outlogin_wrap_open').click(function(){
outlogin_wrap_open('layer_outlogin'); /* 열고자 하는 것의 아이디를 입력 */
$("#mb_id").focus().select();
return false;
});
$('.outlogin_wrap .outlogin_bg').click(function(){
$('.outlogin_wrap').fadeOut();
});
$('#outlogin_wrap_close').click(function(){
$('.outlogin_wrap').fadeOut();
return false;
});
});
</script>

외부로그인 스킨 폴더 > style.css 파일 소스중..

.outlogin_wrap {
left: 0px;top:0px;width:100%;height:100%;display:none;position:fixed;z-index: 10000; _position: absolute;}
.outlogin_wrap .outlogin_bg {
background:rgb(0, 0, 0);left:0px;top:0px;width:100%;height:100%;filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8; position: absolute;
}
.outlogin_wrap_area {position:absolute;left:50%;top:50%;padding:5px;width:490px;}

위에 소스를 적용하고자 하는 외부로그인 스킨폴더> style.css 소스 맨 상단에 추가를 해 줍니다.

outlogin.skin.2 적용은 출처 주소의 스킨을 참고해 보세요..