+ 기존 아이디에 SNS 아이디를 연결합니다.
+
아이디 필수
비밀번호 필수
@@ -132,53 +118,23 @@ add_stylesheet('
diff --git a/skin/social/remodal/remodal-default-theme.css b/skin/social/remodal/remodal-default-theme.css
new file mode 100644
index 000000000..886c3170d
--- /dev/null
+++ b/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;
+}
diff --git a/skin/social/remodal/remodal.css b/skin/social/remodal/remodal.css
new file mode 100644
index 000000000..a065fab8c
--- /dev/null
+++ b/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;
+}
diff --git a/skin/social/remodal/remodal.js b/skin/social/remodal/remodal.js
new file mode 100644
index 000000000..2c731df12
--- /dev/null
+++ b/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 = $('
').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 = $('
')
+ .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);
+ });
+});
diff --git a/skin/social/style.css b/skin/social/style.css
index 36ec3e1fe..ba50ed12b 100644
--- a/skin/social/style.css
+++ b/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}
+}
\ No newline at end of file