그누보드5 리뉴얼 소셜 수정중

extend/social_login.extend.php

@@ -13,12 +13,12 @@ define('G5_SOCIAL_LOGIN_START_PARAM', 'hauth.start');
 // 소셜로그인 login_done 파라미터 이름입니다. 기본값은 hauth.done
 define('G5_SOCIAL_LOGIN_DONE_PARAM', 'hauth.done');
 
-// 소셜로그인 G5_SOCIAL_LOGIN_URL 값의 끝에 해당 문자열을 더합니다.
-define('G5_SOCIAL_LOGIN_ADD_URL', '/');
-
 define('G5_SOCIAL_LOGIN_PATH', G5_PLUGIN_PATH.'/'.G5_SOCIAL_LOGIN_DIR);
 define('G5_SOCIAL_LOGIN_URL', G5_PLUGIN_URL.'/'.G5_SOCIAL_LOGIN_DIR);
 
+// 소셜로그인 SOCIAL_LOGIN_BASE_URL 기본값은 G5_SOCIAL_LOGIN_URL.'/'
+define('SOCIAL_LOGIN_BASE_URL', G5_SOCIAL_LOGIN_URL.'/');
+
 if(G5_IS_MOBILE) {
     define('G5_SOCIAL_SKIN_PATH', G5_PATH.'/'.G5_MOBILE_DIR.'/'.G5_SKIN_DIR.'/'.G5_SOCIAL_LOGIN_DIR);
     define('G5_SOCIAL_SKIN_URL', G5_URL.'/'.G5_MOBILE_DIR.'/'.G5_SKIN_DIR.'/'.G5_SOCIAL_LOGIN_DIR);

plugin/social/includes/functions.php

@@ -84,7 +84,7 @@ function social_login_get_provider_adapter( $provider )
         return $g5['hybrid_auth']->authenticate($provider);
     }
     
-    $base_url = G5_SOCIAL_LOGIN_URL.G5_SOCIAL_LOGIN_ADD_URL;
+    $base_url = SOCIAL_LOGIN_BASE_URL;
     $hauth_time = time();
 
     $connect_data = array(
@@ -870,6 +870,32 @@ function social_service_check($provider){
     return false;
 }
 
+function exist_mb_id_recursive($mb_id){
+    static $count = 0;
+
+    $mb_id = ($count > 0) ? $mb_id.(string)$count : $mb_id;
+
+    if( ! exist_mb_id($mb_id) ){
+        return $mb_id;
+    }
+    
+    $count++;
+    return exist_mb_id_recursive($mb_id);
+}
+
+function exist_mb_nick_recursive($mb_nick){
+    static $count = 0;
+
+    $mb_nick = ($count > 0) ? $mb_nick.(string)$count : $mb_nick;
+
+    if( ! exist_mb_nick($mb_nick, '') ){
+        return $mb_nick;
+    }
+    
+    $count++;
+    return exist_mb_nick_recursive($mb_nick);
+}
+
 function social_get_nonce($key=''){
     if( $key == 'd' ){  //nonce_duration
         return 7200;

plugin/social/includes/g5_endpoint.php

@@ -11,11 +11,11 @@ class G5_Hybrid_Authentication {
         require_once( G5_SOCIAL_LOGIN_PATH.'/includes/g5_endpoint_class.php' );
 
         if( defined('G5_SOCIAL_LOGIN_START_PARAM') && G5_SOCIAL_LOGIN_START_PARAM !== 'hauth.start' && isset($_REQUEST[G5_SOCIAL_LOGIN_START_PARAM]) ){
-            $_REQUEST['hauth.start'] = preg_replace('/[^a-zA-Z0-9\-\._]/i', '', $_REQUEST[G5_SOCIAL_LOGIN_START_PARAM]);
+            $_REQUEST['hauth_start'] = preg_replace('/[^a-zA-Z0-9\-\._]/i', '', $_REQUEST[G5_SOCIAL_LOGIN_START_PARAM]);
         }
 
         if( defined('G5_SOCIAL_LOGIN_DONE_PARAM') && G5_SOCIAL_LOGIN_DONE_PARAM !== 'hauth.done' && isset($_REQUEST[G5_SOCIAL_LOGIN_DONE_PARAM]) ){
-            $_REQUEST['hauth.done'] = preg_replace('/[^a-zA-Z0-9\-\._]/i', '', $_REQUEST[G5_SOCIAL_LOGIN_DONE_PARAM]);
+            $_REQUEST['hauth_done'] = preg_replace('/[^a-zA-Z0-9\-\._]/i', '', $_REQUEST[G5_SOCIAL_LOGIN_DONE_PARAM]);
         }
 
         /*

plugin/social/index.php

@@ -12,4 +12,6 @@
 include_once('_common.php');
 require_once( "includes/g5_endpoint.php" );
 
+error_reporting(0); // Turn off all error reporting
+
 G5_Hybrid_Authentication::hybridauth_endpoint();

plugin/social/register_member.php

@@ -16,7 +16,7 @@ if( $is_member ){
 $provider_name = social_get_request_provider();
 $user_profile = social_session_exists_check();
 if( ! $user_profile ){
-    alert( "소셜로그인 을 하신 분만 접근할 수 있습니다.", G5_URL);
+    alert( "소셜로그인을 하신 분만 접근할 수 있습니다.", G5_URL);
 }
 
 // 소셜 가입된 내역이 있는지 확인 상수 G5_SOCIAL_DELETE_DAY 관련
@@ -26,15 +26,17 @@ $user_nick = social_relace_nick($user_profile->displayName);
 $user_email = ($user_profile->emailVerified) ? $user_profile->emailVerified : $user_profile->email;
 $user_id = $user_profile->sid ? preg_replace("/[^0-9a-z_]+/i", "", $user_profile->sid) : get_social_convert_id($user_profile->identifier, $provider_name);
 
-$is_exists_id = exist_mb_id($user_id);
-$is_exists_name = exist_mb_nick($user_nick, '');
+//$is_exists_id = exist_mb_id($user_id);
+//$is_exists_name = exist_mb_nick($user_nick, '');
+$user_id = exist_mb_id_recursive($user_id);
+$user_nick = exist_mb_nick_recursive($user_nick, '');
 $is_exists_email = exist_mb_email($user_email, '');
 
 // 불법접근을 막도록 토큰생성
 $token = md5(uniqid(rand(), true));
 set_session("ss_token", $token);
 
-$g5['title'] = '소셜 회원 가입';
+$g5['title'] = '소셜 회원 가입 - '.social_get_provider_service_name($provider_name);
 
 include_once(G5_BBS_PATH.'/_head.php');
 

plugin/social/register_member_update.php

@@ -41,10 +41,16 @@ if($tmp_mb_nick != $mb_nick) {
     alert('닉네임을 올바르게 입력해 주십시오.');
 }
 
-if ($w == '' && !$mb_password)
-    alert('비밀번호가 넘어오지 않았습니다.');
-if($w == '' && $mb_password != $mb_password_re)
-    alert('비밀번호가 일치하지 않습니다.');
+if( $mb_password ){
+
+    if ($w == '' && !$mb_password)
+        alert('비밀번호가 넘어오지 않았습니다.');
+    if($w == '' && $mb_password != $mb_password_re)
+        alert('비밀번호가 일치하지 않습니다.');
+
+} else {
+    $mb_password = '';
+}
 
 if ($msg = empty_mb_name($mb_name))       alert($msg, "", true, true);
 if ($msg = empty_mb_nick($mb_nick))     alert($msg, "", true, true);

skin/social/register_social_member.skin.php

@@ -6,29 +6,16 @@ if( ! $config['cf_social_login_use']) {     //소셜 로그인을 사용하지
 }
 
 // add_stylesheet('css 구문', 출력순서); 숫자가 작을 수록 먼저 출력됨
-add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 10);
+add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal.css">', 11);
+add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/remodal/remodal-default-theme.css">', 12);
+add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css">', 13);
+add_javascript('<script src="'.get_social_skin_url().'/remodal/remodal.js"></script>', 10);
+
+$email_msg = $is_exists_email ? '등록할 이메일이 중복되었습니다.다른 이메일을 입력해 주세요.' : '';
 ?>
 
 <!-- 회원정보 입력/수정 시작 { -->
 <div class="mbskin">
-    
-    <div class="social_info_guide">
-        회원님은 소셜 계정을 통하여 로그인하셨습니다.<br>
-        회원님의 아이디, 패스워드, 이메일, 닉네임 정보를 입력하시면, 앞으로는 소셜계정으로도 로그인을 계속 하실 수 있으며, 또한 입력하신 회원 아이디와 패스워드로도 이 홈페이지에 로그인이 가능해집니다.<br>
-        또한 이 정보를 입력하신 후에 개인정보 수정페이지에서 메일수신여부, 쪽지수신여부 등을 계속하여 설정하실 수 있습니다.
-    </div>
-
-    <?php
-    if( $is_exists_id ){    //아이디 중복 메시지
-        echo '<p class="bg-warning bg-warning1">등록할 아이디가 중복되었습니다.다른 아이디를 입력해 주세요.</p>'.PHP_EOL;
-    }
-    if( $is_exists_email ){     //이메일 중복 메시지
-        echo '<p class="bg-warning bg-warning2">등록할 이메일이 중복되었습니다.다른 이메일을 입력해 주세요.</p>'.PHP_EOL;
-    }
-    if( $is_exists_name ){     //닉네임 중복 메시지
-        echo '<p class="bg-warning bg-warning3">등록할 닉네임이 중복되었습니다.다른 닉네임을 입력해 주세요.</p>'.PHP_EOL;
-    }
-    ?>
 
     <script src="<?php echo G5_JS_URL ?>/jquery.register_form.js"></script>
     
@@ -40,57 +27,43 @@ add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css
     <input type="hidden" name="provider" value="<?php echo $provider_name;?>" >
     <input type="hidden" name="action" value="register">
 
-    <div class="tbl_frm01 tbl_wrap">
-        <table>
-        <caption>사이트 이용정보 입력</caption>
-        <tbody>
-        <tr>
-            <th scope="row"><label for="reg_mb_id">아이디<strong class="sound_only">필수</strong></label></th>
-            <td>
-                <span class="frm_info">영문자, 숫자, _ 만 입력 가능. 최소 3자이상 입력하세요.</span>
-                <input type="text" name="mb_id" value="<?php echo $user_id; ?>" id="reg_mb_id" <?php echo $required; ?> <?php echo $readonly; ?> class="frm_input <?php echo $required; ?> <?php echo $readonly; ?>" minlength="3" maxlength="20">
-                <span id="msg_mb_id"></span>
-            </td>
-        </tr>
-        <tr>
-            <th scope="row"><label for="reg_mb_password">비밀번호<strong class="sound_only">필수</strong></label></th>
-            <td><input type="password" name="mb_password" id="reg_mb_password" <?php echo $required; ?> class="frm_input <?php echo $required; ?>" minlength="3" maxlength="20"></td>
-        </tr>
-        <tr>
-            <th scope="row"><label for="reg_mb_password_re">비밀번호 확인<strong class="sound_only">필수</strong></label></th>
-            <td><input type="password" name="mb_password_re" id="reg_mb_password_re" <?php echo $required; ?> class="frm_input <?php echo $required; ?>" minlength="3" maxlength="20"></td>
-        </tr>
-        </tbody>
-        </table>
+    <input type="hidden" name="mb_id" value="<?php echo $user_id; ?>" id="reg_mb_id">
+    <input type="hidden" name="mb_nick_default" value="<?php echo isset($user_nick)?get_text($user_nick):''; ?>">
+    <input type="hidden" name="mb_nick" value="<?php echo isset($user_nick)?get_text($user_nick):''; ?>" id="reg_mb_nick">
+
+    <div class="toggle">
+        <div class="toggle-title">
+		<span class="right_i"><i></i> 자세히보기</span>
+		<span class="title-name"><input type="checkbox" name="agree" value="1" id="agree11"> <label for="agree11">회원가입약관</label></span>
+        </div>
+        <div class="toggle-inner">
+            <p><?php echo conv_content($config['cf_stipulation'], 0); ?></p>
+        </div>
+    </div>  <!-- END OF TOGGLE -->
+    <div class="toggle">
+        <div class="toggle-title">
+		<span class="right_i"><i></i> 자세히보기</span>
+		<span class="title-name"><input type="checkbox" name="agree2" value="1" id="agree21"> <label for="agree21">개인정보처리방침안내</label></span>
+        </div>
+        <div class="toggle-inner">
+            <p><?php echo conv_content($config['cf_privacy'], 0); ?></p>
+        </div>
+    </div>  <!-- END OF TOGGLE -->
+    <div class="toggle">
+        <div class="toggle-title">
+		<span class="title-name"><input type="checkbox" name="chk_all" value="1" id="chk_all"> <label for="chk_all"><strong>전체약관에 동의합니다.</strong></label></span>
+        </div>
     </div>
 
     <div class="tbl_frm01 tbl_wrap">
         <table>
         <caption>개인정보 입력</caption>
         <tbody>
-        <tr>
-            <th scope="row"><label for="reg_mb_nick">닉네임<strong class="sound_only">필수</strong></label></th>
-            <td>
-                <span class="frm_info">
-                    공백없이 한글,영문,숫자만 입력 가능 (한글2자, 영문4자 이상)<br>
-                    닉네임을 바꾸시면 앞으로 <?php echo (int)$config['cf_nick_modify'] ?>일 이내에는 변경 할 수 없습니다.
-                </span>
-                <input type="hidden" name="mb_nick_default" value="<?php echo isset($user_nick)?get_text($user_nick):''; ?>">
-                <input type="text" name="mb_nick" value="<?php echo isset($user_nick)?get_text($user_nick):''; ?>" id="reg_mb_nick" required class="frm_input required nospace" size="10" maxlength="20">
-                <span id="msg_mb_nick"></span>
-            </td>
-        </tr>
-
         <tr>
             <th scope="row"><label for="reg_mb_email">E-mail<strong class="sound_only">필수</strong></label></th>
             <td>
-                <?php if ($config['cf_use_email_certify']) {  ?>
-                <span class="frm_info">
-                    <?php if ($w=='') { echo "E-mail 로 발송된 내용을 확인한 후 인증하셔야 회원가입이 완료됩니다."; }  ?>
-                    <?php if ($w=='u') { echo "E-mail 주소를 변경하시면 다시 인증하셔야 합니다."; }  ?>
-                </span>
-                <?php } ?>
-                <input type="text" name="mb_email" value="<?php echo isset($user_email)?$user_email:''; ?>" id="reg_mb_email" required class="frm_input email required" size="70" maxlength="100">
+                <input type="text" name="mb_email" value="<?php echo isset($user_email)?$user_email:''; ?>" id="reg_mb_email" required class="frm_input email required" size="70" maxlength="100" placeholder="이메일을 입력해주세요." >
+                <p class="email_msg"><?php echo $email_msg; ?></p>
             </td>
         </tr>
 
@@ -99,28 +72,41 @@ add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css
     </div>
 
     <div class="btn_confirm">
-        <input type="submit" value="<?php echo $w==''?'회원가입':'정보수정'; ?>" id="btn_submit" class="btn_submit" accesskey="s">
+        <input type="submit" value="회원가입" id="btn_submit" class="btn_submit" accesskey="s">
         <a href="<?php echo G5_URL ?>" class="btn_cancel">취소</a>
     </div>
     </form>
     <!-- 새로가입 끝 -->
 
-    <!-- 기존 계정 연결 시작 -->
-    <div id="sns-link-pnl">
+    <!-- 기존 계정 연결 -->
 
-        <div>
-            <form method="post" action="<?php echo $login_action_url; ?>" onsubmit="return social_obj.flogin_submit(this);">
-            <input type="hidden" name="url" value="<?php echo $login_url; ?>">
-            <input type="hidden" name="provider" value="<?php echo $provider_name; ?>">
-            <input type="hidden" name="action" value="link">
+    <div class="member_connect">
+        <p>혹시 기존 회원이신가요?</p>
+        <button type="button" class="mw-opener btn-txt" data-remodal-target="modal">
+            기존 계정에 연결하기
+            <i class="fa fa-angle-double-right"></i>
+        </button>
+    </div>
 
-            <div>기존 계정에 연결하기</div>
+    <div id="sns-link-pnl" class="remodal" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title" aria-describedby="modal1Desc">
+        <button type="button" class="mw-close" data-remodal-action="close">
+            <i class="fa fa-close"></i>
+            <span class="txt">닫기</span>
+        </button>
+        <div class="mw-fg">
+            <form method="post" action="<?php echo $login_action_url ?>" onsubmit="return social_obj.flogin_submit(this);">
+            <input type="hidden" id="url" name="url" value="<?php echo $login_url ?>">
+            <input type="hidden" id="provider" name="provider" value="<?php echo $provider_name ?>">
+            <input type="hidden" id="action" name="action" value="social_account_linking">
 
-            <div>
-                기존 아이디에 SNS 아이디를 연결합니다.
+            <div class="mw-title">기존 계정에 연결하기</div>
+
+            <div class="mw-desc">
+                기존 아이디에 SNS 아이디를 연결합니다.<br>
+                SNS 아이디로 로그인 하시면 기존 아이디로 로그인 됩니다.
             </div>
 
-            <div>
+            <div id="login_fs">
                 <label for="login_id" class="login_id">아이디<strong class="sound_only"> 필수</strong></label>
                 <span class="lg_id"><input type="text" name="mb_id" id="login_id" class="frm_input required" size="20" maxLength="20" ></span>
                 <label for="login_pw" class="login_pw">비밀번호<strong class="sound_only"> 필수</strong></label>
@@ -132,53 +118,23 @@ add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css
             </form>
         </div>
     </div>
-    <!-- 기존 계정 연결 끝 -->
 
     <script>
 
     // submit 최종 폼체크
     function fregisterform_submit(f)
     {
-        // 회원아이디 검사
-        if (f.w.value == "") {
-            var msg = reg_mb_id_check();
-            if (msg) {
-                alert(msg);
-                f.mb_id.select();
-                return false;
-            }
-        }
 
-        if (f.w.value == "") {
-            if (f.mb_password.value.length < 3) {
-                alert("비밀번호를 3글자 이상 입력하십시오.");
-                f.mb_password.focus();
-                return false;
-            }
-        }
-
-        if (f.mb_password.value != f.mb_password_re.value) {
-            alert("비밀번호가 같지 않습니다.");
-            f.mb_password_re.focus();
+        if (!f.agree.checked) {
+            alert("회원가입약관의 내용에 동의하셔야 회원가입 하실 수 있습니다.");
+            f.agree.focus();
             return false;
         }
 
-        if (f.mb_password.value.length > 0) {
-            if (f.mb_password_re.value.length < 3) {
-                alert("비밀번호를 3글자 이상 입력하십시오.");
-                f.mb_password_re.focus();
-                return false;
-            }
-        }
-
-        // 닉네임 검사
-        if ((f.w.value == "") || (f.w.value == "u" && f.mb_nick.defaultValue != f.mb_nick.value)) {
-            var msg = reg_mb_nick_check();
-            if (msg) {
-                alert(msg);
-                f.reg_mb_nick.select();
-                return false;
-            }
+        if (!f.agree2.checked) {
+            alert("개인정보처리방침안내의 내용에 동의하셔야 회원가입 하실 수 있습니다.");
+            f.agree2.focus();
+            return false;
         }
 
         // E-mail 검사
@@ -186,6 +142,7 @@ add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css
             var msg = reg_mb_email_check();
             if (msg) {
                 alert(msg);
+                jQuery(".email_msg").html(msg);
                 f.reg_mb_email.select();
                 return false;
             }
@@ -207,6 +164,30 @@ add_stylesheet('<link rel="stylesheet" href="'.get_social_skin_url().'/style.css
 
         return true;
     }
+
+    jQuery(function($){
+        if( jQuery(".toggle .toggle-title").hasClass('active') ){
+            jQuery(".toggle .toggle-title.active").closest('.toggle').find('.toggle-inner').show();
+        }
+        jQuery(".toggle .toggle-title .right_i").click(function(){
+
+            var $parent = $(this).parent();
+            
+            if( $parent.hasClass('active') ){
+                $parent.removeClass("active").closest('.toggle').find('.toggle-inner').slideUp(200);
+            } else {
+                $parent.addClass("active").closest('.toggle').find('.toggle-inner').slideDown(200);
+            }
+        });
+        // 모두선택
+        $("input[name=chk_all]").click(function() {
+            if ($(this).prop('checked')) {
+                $("input[name^=agree]").prop('checked', true);
+            } else {
+                $("input[name^=agree]").prop("checked", false);
+            }
+        });
+    });
     </script>
 
 </div>

skin/social/remodal/remodal-default-theme.css

@@ -0,0 +1,242 @@
+/* ==========================================================================
+   Remodal's default mobile first theme
+   ========================================================================== */
+
+/* Default theme styles for the background */
+
+.remodal-bg.remodal-is-opening,
+.remodal-bg.remodal-is-opened {
+  filter: blur(3px);
+}
+
+/* Default theme styles of the overlay */
+
+.remodal-overlay {
+  background: rgba(43, 46, 56, 0.9);
+}
+
+.remodal-overlay.remodal-is-opening,
+.remodal-overlay.remodal-is-closing {
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.remodal-overlay.remodal-is-opening {
+  animation-name: remodal-overlay-opening-keyframes;
+}
+
+.remodal-overlay.remodal-is-closing {
+  animation-name: remodal-overlay-closing-keyframes;
+}
+
+/* Default theme styles of the wrapper */
+
+.remodal-wrapper {
+  padding: 10px 10px 0;
+}
+
+/* Default theme styles of the modal dialog */
+
+.remodal {
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 35px;
+
+  transform: translate3d(0, 0, 0);
+
+  color: #2b2e38;
+  background: #fff;
+}
+
+.remodal.remodal-is-opening,
+.remodal.remodal-is-closing {
+  animation-duration: 0.3s;
+  animation-fill-mode: forwards;
+}
+
+.remodal.remodal-is-opening {
+  animation-name: remodal-opening-keyframes;
+}
+
+.remodal.remodal-is-closing {
+  animation-name: remodal-closing-keyframes;
+}
+
+/* Vertical align of the modal dialog */
+
+.remodal,
+.remodal-wrapper:after {
+  vertical-align: middle;
+}
+
+/* Close button */
+
+.remodal-close {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+  overflow: visible;
+
+  width: 35px;
+  height: 35px;
+  margin: 0;
+  padding: 0;
+
+  cursor: pointer;
+  transition: color 0.2s;
+  text-decoration: none;
+
+  color: #95979c;
+  border: 0;
+  outline: 0;
+  background: transparent;
+}
+
+.remodal-close:hover,
+.remodal-close:focus {
+  color: #2b2e38;
+}
+
+.remodal-close:before {
+  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
+  font-size: 25px;
+  line-height: 35px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  display: block;
+
+  width: 35px;
+
+  content: "\00d7";
+  text-align: center;
+}
+
+/* Dialog buttons */
+
+.remodal-confirm,
+.remodal-cancel {
+  font: inherit;
+
+  display: inline-block;
+  overflow: visible;
+
+  min-width: 110px;
+  margin: 0;
+  padding: 12px 0;
+
+  cursor: pointer;
+  transition: background 0.2s;
+  text-align: center;
+  vertical-align: middle;
+  text-decoration: none;
+
+  border: 0;
+  outline: 0;
+}
+
+.remodal-confirm {
+  color: #fff;
+  background: #81c784;
+}
+
+.remodal-confirm:hover,
+.remodal-confirm:focus {
+  background: #66bb6a;
+}
+
+.remodal-cancel {
+  color: #fff;
+  background: #e57373;
+}
+
+.remodal-cancel:hover,
+.remodal-cancel:focus {
+  background: #ef5350;
+}
+
+/* Remove inner padding and border in Firefox 4+ for the button tag. */
+
+.remodal-confirm::-moz-focus-inner,
+.remodal-cancel::-moz-focus-inner,
+.remodal-close::-moz-focus-inner {
+  padding: 0;
+
+  border: 0;
+}
+
+/* Keyframes
+   ========================================================================== */
+
+@keyframes remodal-opening-keyframes {
+  from {
+    transform: scale(1.05);
+
+    opacity: 0;
+  }
+  to {
+    transform: none;
+
+    opacity: 1;
+
+    filter: blur(0);
+  }
+}
+
+@keyframes remodal-closing-keyframes {
+  from {
+    transform: scale(1);
+
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+
+    opacity: 0;
+
+    filter: blur(0);
+  }
+}
+
+@keyframes remodal-overlay-opening-keyframes {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes remodal-overlay-closing-keyframes {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Media queries
+   ========================================================================== */
+
+@media only screen and (min-width: 641px) {
+  .remodal {
+    max-width: 700px;
+  }
+}
+
+/* IE8
+   ========================================================================== */
+
+.lt-ie9 .remodal-overlay {
+  background: #2b2e38;
+}
+
+.lt-ie9 .remodal {
+  width: 700px;
+}

skin/social/remodal/remodal.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Remodal's necessary styles
+   ========================================================================== */
+
+/* Hide scroll bar */
+
+html.remodal-is-locked {
+  overflow: hidden;
+
+  touch-action: none;
+}
+
+/* Anti FOUC */
+
+.remodal,
+[data-remodal-id] {
+  display: none;
+}
+
+/* Necessary styles of the overlay */
+
+.remodal-overlay {
+  position: fixed;
+  z-index: 9999;
+  top: -5000px;
+  right: -5000px;
+  bottom: -5000px;
+  left: -5000px;
+
+  display: none;
+}
+
+/* Necessary styles of the wrapper */
+
+.remodal-wrapper {
+  position: fixed;
+  z-index: 10000;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: none;
+  overflow: auto;
+
+  text-align: center;
+
+  -webkit-overflow-scrolling: touch;
+}
+
+.remodal-wrapper:after {
+  display: inline-block;
+
+  height: 100%;
+  margin-left: -0.05em;
+
+  content: "";
+}
+
+/* Fix iPad, iPhone glitches */
+
+.remodal-overlay,
+.remodal-wrapper {
+  backface-visibility: hidden;
+}
+
+/* Necessary styles of the modal dialog */
+
+.remodal {
+  position: relative;
+
+  outline: none;
+
+  text-size-adjust: 100%;
+}
+
+.remodal-is-initialized {
+  /* Disable Anti-FOUC */
+  display: inline-block;
+}

skin/social/remodal/remodal.js

@@ -0,0 +1,776 @@
+!(function(root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    define(['jquery'], function($) {
+      return factory(root, $);
+    });
+  } else if (typeof exports === 'object') {
+    factory(root, require('jquery'));
+  } else {
+    factory(root, root.jQuery || root.Zepto);
+  }
+})(this, function(global, $) {
+
+  'use strict';
+
+  /**
+   * Name of the plugin
+   * @private
+   * @const
+   * @type {String}
+   */
+  var PLUGIN_NAME = 'remodal';
+
+  /**
+   * Namespace for CSS and events
+   * @private
+   * @const
+   * @type {String}
+   */
+  var NAMESPACE = global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME;
+
+  /**
+   * Animationstart event with vendor prefixes
+   * @private
+   * @const
+   * @type {String}
+   */
+  var ANIMATIONSTART_EVENTS = $.map(
+    ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'],
+
+    function(eventName) {
+      return eventName + '.' + NAMESPACE;
+    }
+
+  ).join(' ');
+
+  /**
+   * Animationend event with vendor prefixes
+   * @private
+   * @const
+   * @type {String}
+   */
+  var ANIMATIONEND_EVENTS = $.map(
+    ['animationend', 'webkitAnimationEnd', 'MSAnimationEnd', 'oAnimationEnd'],
+
+    function(eventName) {
+      return eventName + '.' + NAMESPACE;
+    }
+
+  ).join(' ');
+
+  /**
+   * Default settings
+   * @private
+   * @const
+   * @type {Object}
+   */
+  var DEFAULTS = $.extend({
+    hashTracking: true,
+    closeOnConfirm: true,
+    closeOnCancel: true,
+    closeOnEscape: true,
+    closeOnOutsideClick: true,
+    modifier: '',
+    appendTo: null
+  }, global.REMODAL_GLOBALS && global.REMODAL_GLOBALS.DEFAULTS);
+
+  /**
+   * States of the Remodal
+   * @private
+   * @const
+   * @enum {String}
+   */
+  var STATES = {
+    CLOSING: 'closing',
+    CLOSED: 'closed',
+    OPENING: 'opening',
+    OPENED: 'opened'
+  };
+
+  /**
+   * Reasons of the state change.
+   * @private
+   * @const
+   * @enum {String}
+   */
+  var STATE_CHANGE_REASONS = {
+    CONFIRMATION: 'confirmation',
+    CANCELLATION: 'cancellation'
+  };
+
+  /**
+   * Is animation supported?
+   * @private
+   * @const
+   * @type {Boolean}
+   */
+  var IS_ANIMATION = (function() {
+    var style = document.createElement('div').style;
+
+    return style.animationName !== undefined ||
+      style.WebkitAnimationName !== undefined ||
+      style.MozAnimationName !== undefined ||
+      style.msAnimationName !== undefined ||
+      style.OAnimationName !== undefined;
+  })();
+
+  /**
+   * Is iOS?
+   * @private
+   * @const
+   * @type {Boolean}
+   */
+  var IS_IOS = /iPad|iPhone|iPod/.test(navigator.platform);
+
+  /**
+   * Current modal
+   * @private
+   * @type {Remodal}
+   */
+  var current;
+
+  /**
+   * Scrollbar position
+   * @private
+   * @type {Number}
+   */
+  var scrollTop;
+
+  /**
+   * Returns an animation duration
+   * @private
+   * @param {jQuery} $elem
+   * @returns {Number}
+   */
+  function getAnimationDuration($elem) {
+    if (
+      IS_ANIMATION &&
+      $elem.css('animation-name') === 'none' &&
+      $elem.css('-webkit-animation-name') === 'none' &&
+      $elem.css('-moz-animation-name') === 'none' &&
+      $elem.css('-o-animation-name') === 'none' &&
+      $elem.css('-ms-animation-name') === 'none'
+    ) {
+      return 0;
+    }
+
+    var duration = $elem.css('animation-duration') ||
+      $elem.css('-webkit-animation-duration') ||
+      $elem.css('-moz-animation-duration') ||
+      $elem.css('-o-animation-duration') ||
+      $elem.css('-ms-animation-duration') ||
+      '0s';
+
+    var delay = $elem.css('animation-delay') ||
+      $elem.css('-webkit-animation-delay') ||
+      $elem.css('-moz-animation-delay') ||
+      $elem.css('-o-animation-delay') ||
+      $elem.css('-ms-animation-delay') ||
+      '0s';
+
+    var iterationCount = $elem.css('animation-iteration-count') ||
+      $elem.css('-webkit-animation-iteration-count') ||
+      $elem.css('-moz-animation-iteration-count') ||
+      $elem.css('-o-animation-iteration-count') ||
+      $elem.css('-ms-animation-iteration-count') ||
+      '1';
+
+    var max;
+    var len;
+    var num;
+    var i;
+
+    duration = duration.split(', ');
+    delay = delay.split(', ');
+    iterationCount = iterationCount.split(', ');
+
+    // The 'duration' size is the same as the 'delay' size
+    for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) {
+      num = parseFloat(duration[i]) * parseInt(iterationCount[i], 10) + parseFloat(delay[i]);
+
+      if (num > max) {
+        max = num;
+      }
+    }
+
+    return max;
+  }
+
+  /**
+   * Returns a scrollbar width
+   * @private
+   * @returns {Number}
+   */
+  function getScrollbarWidth() {
+    if ($(document).height() <= $(window).height()) {
+      return 0;
+    }
+
+    var outer = document.createElement('div');
+    var inner = document.createElement('div');
+    var widthNoScroll;
+    var widthWithScroll;
+
+    outer.style.visibility = 'hidden';
+    outer.style.width = '100px';
+    document.body.appendChild(outer);
+
+    widthNoScroll = outer.offsetWidth;
+
+    // Force scrollbars
+    outer.style.overflow = 'scroll';
+
+    // Add inner div
+    inner.style.width = '100%';
+    outer.appendChild(inner);
+
+    widthWithScroll = inner.offsetWidth;
+
+    // Remove divs
+    outer.parentNode.removeChild(outer);
+
+    return widthNoScroll - widthWithScroll;
+  }
+
+  /**
+   * Locks the screen
+   * @private
+   */
+  function lockScreen() {
+    if (IS_IOS) {
+      return;
+    }
+
+    var $html = $('html');
+    var lockedClass = namespacify('is-locked');
+    var paddingRight;
+    var $body;
+
+    if (!$html.hasClass(lockedClass)) {
+      $body = $(document.body);
+
+      // Zepto does not support '-=', '+=' in the `css` method
+      paddingRight = parseInt($body.css('padding-right'), 10) + getScrollbarWidth();
+
+      $body.css('padding-right', paddingRight + 'px');
+      $html.addClass(lockedClass);
+    }
+  }
+
+  /**
+   * Unlocks the screen
+   * @private
+   */
+  function unlockScreen() {
+    if (IS_IOS) {
+      return;
+    }
+
+    var $html = $('html');
+    var lockedClass = namespacify('is-locked');
+    var paddingRight;
+    var $body;
+
+    if ($html.hasClass(lockedClass)) {
+      $body = $(document.body);
+
+      // Zepto does not support '-=', '+=' in the `css` method
+      paddingRight = parseInt($body.css('padding-right'), 10) - getScrollbarWidth();
+
+      $body.css('padding-right', paddingRight + 'px');
+      $html.removeClass(lockedClass);
+    }
+  }
+
+  /**
+   * Sets a state for an instance
+   * @private
+   * @param {Remodal} instance
+   * @param {STATES} state
+   * @param {Boolean} isSilent If true, Remodal does not trigger events
+   * @param {String} Reason of a state change.
+   */
+  function setState(instance, state, isSilent, reason) {
+
+    var newState = namespacify('is', state);
+    var allStates = [namespacify('is', STATES.CLOSING),
+                     namespacify('is', STATES.OPENING),
+                     namespacify('is', STATES.CLOSED),
+                     namespacify('is', STATES.OPENED)].join(' ');
+
+    instance.$bg
+      .removeClass(allStates)
+      .addClass(newState);
+
+    instance.$overlay
+      .removeClass(allStates)
+      .addClass(newState);
+
+    instance.$wrapper
+      .removeClass(allStates)
+      .addClass(newState);
+
+    instance.$modal
+      .removeClass(allStates)
+      .addClass(newState);
+
+    instance.state = state;
+    !isSilent && instance.$modal.trigger({
+      type: state,
+      reason: reason
+    }, [{ reason: reason }]);
+  }
+
+  /**
+   * Synchronizes with the animation
+   * @param {Function} doBeforeAnimation
+   * @param {Function} doAfterAnimation
+   * @param {Remodal} instance
+   */
+  function syncWithAnimation(doBeforeAnimation, doAfterAnimation, instance) {
+    var runningAnimationsCount = 0;
+
+    var handleAnimationStart = function(e) {
+      if (e.target !== this) {
+        return;
+      }
+
+      runningAnimationsCount++;
+    };
+
+    var handleAnimationEnd = function(e) {
+      if (e.target !== this) {
+        return;
+      }
+
+      if (--runningAnimationsCount === 0) {
+
+        // Remove event listeners
+        $.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
+          instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
+        });
+
+        doAfterAnimation();
+      }
+    };
+
+    $.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
+      instance[elemName]
+        .on(ANIMATIONSTART_EVENTS, handleAnimationStart)
+        .on(ANIMATIONEND_EVENTS, handleAnimationEnd);
+    });
+
+    doBeforeAnimation();
+
+    // If the animation is not supported by a browser or its duration is 0
+    if (
+      getAnimationDuration(instance.$bg) === 0 &&
+      getAnimationDuration(instance.$overlay) === 0 &&
+      getAnimationDuration(instance.$wrapper) === 0 &&
+      getAnimationDuration(instance.$modal) === 0
+    ) {
+
+      // Remove event listeners
+      $.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
+        instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
+      });
+
+      doAfterAnimation();
+    }
+  }
+
+  /**
+   * Closes immediately
+   * @private
+   * @param {Remodal} instance
+   */
+  function halt(instance) {
+    if (instance.state === STATES.CLOSED) {
+      return;
+    }
+
+    $.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
+      instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
+    });
+
+    instance.$bg.removeClass(instance.settings.modifier);
+    instance.$overlay.removeClass(instance.settings.modifier).hide();
+    instance.$wrapper.hide();
+    unlockScreen();
+    setState(instance, STATES.CLOSED, true);
+  }
+
+  /**
+   * Parses a string with options
+   * @private
+   * @param str
+   * @returns {Object}
+   */
+  function parseOptions(str) {
+    var obj = {};
+    var arr;
+    var len;
+    var val;
+    var i;
+
+    // Remove spaces before and after delimiters
+    str = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',');
+
+    // Parse a string
+    arr = str.split(',');
+    for (i = 0, len = arr.length; i < len; i++) {
+      arr[i] = arr[i].split(':');
+      val = arr[i][1];
+
+      // Convert a string value if it is like a boolean
+      if (typeof val === 'string' || val instanceof String) {
+        val = val === 'true' || (val === 'false' ? false : val);
+      }
+
+      // Convert a string value if it is like a number
+      if (typeof val === 'string' || val instanceof String) {
+        val = !isNaN(val) ? +val : val;
+      }
+
+      obj[arr[i][0]] = val;
+    }
+
+    return obj;
+  }
+
+  /**
+   * Generates a string separated by dashes and prefixed with NAMESPACE
+   * @private
+   * @param {...String}
+   * @returns {String}
+   */
+  function namespacify() {
+    var result = NAMESPACE;
+
+    for (var i = 0; i < arguments.length; ++i) {
+      result += '-' + arguments[i];
+    }
+
+    return result;
+  }
+
+  /**
+   * Handles the hashchange event
+   * @private
+   * @listens hashchange
+   */
+  function handleHashChangeEvent() {
+    var id = location.hash.replace('#', '');
+    var instance;
+    var $elem;
+
+    if (!id) {
+
+      // Check if we have currently opened modal and animation was completed
+      if (current && current.state === STATES.OPENED && current.settings.hashTracking) {
+        current.close();
+      }
+    } else {
+
+      // Catch syntax error if your hash is bad
+      try {
+        $elem = $(
+          '[data-' + PLUGIN_NAME + '-id="' + id + '"]'
+        );
+      } catch (err) {}
+
+      if ($elem && $elem.length) {
+        instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
+
+        if (instance && instance.settings.hashTracking) {
+          instance.open();
+        }
+      }
+
+    }
+  }
+
+  /**
+   * Remodal constructor
+   * @constructor
+   * @param {jQuery} $modal
+   * @param {Object} options
+   */
+  function Remodal($modal, options) {
+    var $body = $(document.body);
+    var $appendTo = $body;
+    var remodal = this;
+
+    remodal.settings = $.extend({}, DEFAULTS, options);
+    remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1;
+    remodal.state = STATES.CLOSED;
+
+    remodal.$overlay = $('.' + namespacify('overlay'));
+
+    if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) {
+      $appendTo = $(remodal.settings.appendTo);
+    }
+
+    if (!remodal.$overlay.length) {
+      remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
+      $appendTo.append(remodal.$overlay);
+    }
+
+    remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
+
+    remodal.$modal = $modal
+      .addClass(
+        NAMESPACE + ' ' +
+        namespacify('is-initialized') + ' ' +
+        remodal.settings.modifier + ' ' +
+        namespacify('is', STATES.CLOSED))
+      .attr('tabindex', '-1');
+
+    remodal.$wrapper = $('<div>')
+      .addClass(
+        namespacify('wrapper') + ' ' +
+        remodal.settings.modifier + ' ' +
+        namespacify('is', STATES.CLOSED))
+      .hide()
+      .append(remodal.$modal);
+    $appendTo.append(remodal.$wrapper);
+
+    // Add the event listener for the close button
+    remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function(e) {
+      e.preventDefault();
+
+      remodal.close();
+    });
+
+    // Add the event listener for the cancel button
+    remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="cancel"]', function(e) {
+      e.preventDefault();
+
+      remodal.$modal.trigger(STATE_CHANGE_REASONS.CANCELLATION);
+
+      if (remodal.settings.closeOnCancel) {
+        remodal.close(STATE_CHANGE_REASONS.CANCELLATION);
+      }
+    });
+
+    // Add the event listener for the confirm button
+    remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="confirm"]', function(e) {
+      e.preventDefault();
+
+      remodal.$modal.trigger(STATE_CHANGE_REASONS.CONFIRMATION);
+
+      if (remodal.settings.closeOnConfirm) {
+        remodal.close(STATE_CHANGE_REASONS.CONFIRMATION);
+      }
+    });
+
+    // Add the event listener for the overlay
+    remodal.$wrapper.on('click.' + NAMESPACE, function(e) {
+      var $target = $(e.target);
+
+      if (!$target.hasClass(namespacify('wrapper'))) {
+        return;
+      }
+
+      if (remodal.settings.closeOnOutsideClick) {
+        remodal.close();
+      }
+    });
+  }
+
+  /**
+   * Opens a modal window
+   * @public
+   */
+  Remodal.prototype.open = function() {
+    var remodal = this;
+    var id;
+
+    // Check if the animation was completed
+    if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
+      return;
+    }
+
+    id = remodal.$modal.attr('data-' + PLUGIN_NAME + '-id');
+
+    if (id && remodal.settings.hashTracking) {
+      scrollTop = $(window).scrollTop();
+      location.hash = id;
+    }
+
+    if (current && current !== remodal) {
+      halt(current);
+    }
+
+    current = remodal;
+    lockScreen();
+    remodal.$bg.addClass(remodal.settings.modifier);
+    remodal.$overlay.addClass(remodal.settings.modifier).show();
+    remodal.$wrapper.show().scrollTop(0);
+    remodal.$modal.focus();
+
+    syncWithAnimation(
+      function() {
+        setState(remodal, STATES.OPENING);
+      },
+
+      function() {
+        setState(remodal, STATES.OPENED);
+      },
+
+      remodal);
+  };
+
+  /**
+   * Closes a modal window
+   * @public
+   * @param {String} reason
+   */
+  Remodal.prototype.close = function(reason) {
+    var remodal = this;
+
+    // Check if the animation was completed
+    if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING || remodal.state === STATES.CLOSED) {
+      return;
+    }
+
+    if (
+      remodal.settings.hashTracking &&
+      remodal.$modal.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
+    ) {
+      location.hash = '';
+      $(window).scrollTop(scrollTop);
+    }
+
+    syncWithAnimation(
+      function() {
+        setState(remodal, STATES.CLOSING, false, reason);
+      },
+
+      function() {
+        remodal.$bg.removeClass(remodal.settings.modifier);
+        remodal.$overlay.removeClass(remodal.settings.modifier).hide();
+        remodal.$wrapper.hide();
+        unlockScreen();
+
+        setState(remodal, STATES.CLOSED, false, reason);
+      },
+
+      remodal);
+  };
+
+  /**
+   * Returns a current state of a modal
+   * @public
+   * @returns {STATES}
+   */
+  Remodal.prototype.getState = function() {
+    return this.state;
+  };
+
+  /**
+   * Destroys a modal
+   * @public
+   */
+  Remodal.prototype.destroy = function() {
+    var lookup = $[PLUGIN_NAME].lookup;
+    var instanceCount;
+
+    halt(this);
+    this.$wrapper.remove();
+
+    delete lookup[this.index];
+    instanceCount = $.grep(lookup, function(instance) {
+      return !!instance;
+    }).length;
+
+    if (instanceCount === 0) {
+      this.$overlay.remove();
+      this.$bg.removeClass(
+        namespacify('is', STATES.CLOSING) + ' ' +
+        namespacify('is', STATES.OPENING) + ' ' +
+        namespacify('is', STATES.CLOSED) + ' ' +
+        namespacify('is', STATES.OPENED));
+    }
+  };
+
+  /**
+   * Special plugin object for instances
+   * @public
+   * @type {Object}
+   */
+  $[PLUGIN_NAME] = {
+    lookup: []
+  };
+
+  /**
+   * Plugin constructor
+   * @constructor
+   * @param {Object} options
+   * @returns {JQuery}
+   */
+  $.fn[PLUGIN_NAME] = function(opts) {
+    var instance;
+    var $elem;
+
+    this.each(function(index, elem) {
+      $elem = $(elem);
+
+      if ($elem.data(PLUGIN_NAME) == null) {
+        instance = new Remodal($elem, opts);
+        $elem.data(PLUGIN_NAME, instance.index);
+
+        if (
+          instance.settings.hashTracking &&
+          $elem.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
+        ) {
+          instance.open();
+        }
+      } else {
+        instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
+      }
+    });
+
+    return instance;
+  };
+
+  $(document).ready(function() {
+
+    // data-remodal-target opens a modal window with the special Id
+    $(document).on('click', '[data-' + PLUGIN_NAME + '-target]', function(e) {
+      e.preventDefault();
+
+      var elem = e.currentTarget;
+      var id = elem.getAttribute('data-' + PLUGIN_NAME + '-target');
+      var $target = $('[data-' + PLUGIN_NAME + '-id="' + id + '"]');
+
+      $[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open();
+    });
+
+    // Auto initialization of modal windows
+    // They should have the 'remodal' class attribute
+    // Also you can write the `data-remodal-options` attribute to pass params into the modal
+    $(document).find('.' + NAMESPACE).each(function(i, container) {
+      var $container = $(container);
+      var options = $container.data(PLUGIN_NAME + '-options');
+
+      if (!options) {
+        options = {};
+      } else if (typeof options === 'string' || options instanceof String) {
+        options = parseOptions(options);
+      }
+
+      $container[PLUGIN_NAME](options);
+    });
+
+    // Handles the keydown event
+    $(document).on('keydown.' + NAMESPACE, function(e) {
+      if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
+        current.close();
+      }
+    });
+
+    // Handles the hashchange event
+    $(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent);
+  });
+});

skin/social/style.css

@@ -56,4 +56,45 @@
 .social-login-loading{width:100%;height:auto;text-align:center}
 .social-login-loading p{display:inline-block;margin-top:10px;padding:40px 0 0;line-height:30px}
 
+/*기존 계정에 연결하기*/
 
+/* Styles for Accordion */
+.mbskin .toggle:last-child{border-bottom:1px solid #ddd}
+.mbskin .toggle .toggle-title{position:relative;display:block;border-top:1px solid #ddd;margin-bottom:6px}
+.mbskin .toggle .toggle-title h3{font-size:20px;margin:0;line-height:1;cursor:pointer;font-weight:200}
+.mbskin .toggle .toggle-inner{padding:7px 25px 10px 25px;display:none;margin:-7px 0 6px}
+.mbskin .toggle .toggle-inner div{max-width:100%}
+.mbskin .toggle .toggle-title .title-name{display:block;padding:25px 25px 14px}
+.mbskin .right_i{position:absolute;margin:20px;right:0}
+.mbskin .toggle .toggle-title .right_i i{background:url("http://arielbeninca.com/Storage/plus_minus.png") 0 -24px no-repeat;width:24px;height:24px;display:inline-block;vertical-align:middle}
+.mbskin .toggle .toggle-title.active .right_i i{background:url("http://arielbeninca.com/Storage/plus_minus.png") 0 0 no-repeat}
+
+
+#fregisterform .btn_confirm{text-align:left}
+#fregisterform .btn_confirm .btn_submit{height:45px;;padding:0 30px;font-weight:bold;font-size:1.083em}
+#fregisterform .btn_confirm .btn_cancel{line-height:45px;height:45px;padding:0 30px;font-weight:bold;font-size:1.083em}
+
+#sns-link-pnl.remodal{border-radius:5px}
+#sns-link-pnl .mw-close {position:absolute;top:10px;right:10px;margin:0;padding:0;width:30px;height:30px;border:1px solid #dcdcdc;border-radius:30px;background:transparent;color:#383838;cursor:pointer}
+#sns-link-pnl .mw-close:hover {border-color:#ff5191;background:#f7f7f7;color:#ff5191}
+#sns-link-pnl .mw-close .fa {margin:0 0 0 1px}
+#sns-link-pnl .mw-close .txt {position:absolute;line-height:0;font-size:0;overflow:hidden}
+
+#sns-link-pnl #login_fs{margin:0 auto;width:100%;text-align:left}
+#sns-link-pnl #login_fs label{display:block;display: block;font-size: 0.93em;color: #7a7a7a;margin: 5px 0;}
+#sns-link-pnl #login_fs .lg_id,#sns-link-pnl #login_fs .lg_pw{width:100%;margin-bottom:5px;}
+#sns-link-pnl #login_id,#sns-link-pnl #login_pw{margin-left: 45px;border: none;font-size: 1.167em;height: 36px;line-height: 36px;border: transparent;outline: none;width:212px;background:none}
+#sns-link-pnl #login_fs .login_submit{background: url('./img/btn_p.jpg') 50% 50% no-repeat;width: 260px;height: 44px;border: none;color: #fff;font-size:1.167em;margin:10px auto 0;font-weight:bold;cursor:pointer;display:block;}
+#sns-link-pnl .mw-fg {height:320px;text-align:left}
+#sns-link-pnl .login_fs {margin:0 auto;width:260px}
+#sns-link-pnl .mw-fg .mw-desc {margin:0 0 10px;padding:15px;border:1px solid #ededed;background:#f7f7f7}
+#sns-link-pnl .lg_id{background:#fff;border:1px solid #e6e6e6;width:258px;height:36px;background:url('./img/login_id.jpg') 10px 50% no-repeat #fff !important;display:inline-block}
+#sns-link-pnl .lg_pw{background:#fff;border:1px solid #e6e6e6;width:258px;height:36px;background:url('./img/login_pw.jpg') 10px 50% no-repeat #fff !important;display:inline-block}
+#sns-link-pnl .mw-fg .mw-title {margin-top:25px;margin-bottom:10px;font-size:1.667em;font-weight:normal;text-align:center}
+
+.member_connect{margin-top:1em}
+
+html.remodal-is-locked {overflow-y:scroll !important}
+@media only screen and (min-width: 641px) {
+    #sns-link-pnl.remodal{max-width:400px}
+}