Last active
September 24, 2021 08:27
-
-
Save shizhua/f617464d11899aa55c24 to your computer and use it in GitHub Desktop.
WordPress AJAX Login/Register
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// LOGIN | |
function pt_login_member(){ | |
// Get variables | |
$user_login = $_POST['pt_user_login']; | |
$user_pass = $_POST['pt_user_pass']; | |
// Check CSRF token | |
if( !check_ajax_referer( 'ajax-login-nonce', 'login-security', false) ){ | |
echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>')); | |
} | |
// Check if input variables are empty | |
elseif( empty($user_login) || empty($user_pass) ){ | |
echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>')); | |
} else { // Now we can insert this account | |
$user = wp_signon( array('user_login' => $user_login, 'user_password' => $user_pass), false ); | |
if( is_wp_error($user) ){ | |
echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.$user->get_error_message().'</div>')); | |
} else{ | |
echo json_encode(array('error' => false, 'message'=> '<div class="alert alert-success">'.__('Login successful, reloading page...', 'ptheme').'</div>')); | |
} | |
} | |
die(); | |
} | |
add_action('wp_ajax_nopriv_pt_login_member', 'pt_login_member'); | |
// REGISTER | |
function pt_register_member(){ | |
// Get variables | |
$user_login = $_POST['pt_user_login']; | |
$user_email = $_POST['pt_user_email']; | |
// Check CSRF token | |
if( !check_ajax_referer( 'ajax-login-nonce', 'register-security', false) ){ | |
echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Session token has expired, please reload the page and try again', 'ptheme').'</div>')); | |
die(); | |
} | |
// Check if input variables are empty | |
elseif( empty($user_login) || empty($user_email) ){ | |
echo json_encode(array('error' => true, 'message'=> '<div class="alert alert-danger">'.__('Please fill all form fields', 'ptheme').'</div>')); | |
die(); | |
} | |
$errors = register_new_user($user_login, $user_email); | |
if( is_wp_error($errors) ){ | |
$registration_error_messages = $errors->errors; | |
$display_errors = '<div class="alert alert-danger">'; | |
foreach($registration_error_messages as $error){ | |
$display_errors .= '<p>'.$error[0].'</p>'; | |
} | |
$display_errors .= '</div>'; | |
echo json_encode(array('error' => true, 'message' => $display_errors)); | |
} else { | |
echo json_encode(array('error' => false, 'message' => '<div class="alert alert-success">'.__( 'Registration complete. Please check your e-mail.', 'ptheme').'</p>')); | |
} | |
die(); | |
} | |
add_action('wp_ajax_nopriv_pt_register_member', 'pt_register_member'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function pt_open_login_dialog(href){ | |
jQuery('#pt-user-modal .modal-dialog').removeClass('registration-complete'); | |
var modal_dialog = jQuery('#pt-user-modal .modal-dialog'); | |
modal_dialog.attr('data-active-tab', ''); | |
switch(href){ | |
case '#pt-register': | |
modal_dialog.attr('data-active-tab', '#pt-register'); | |
break; | |
case '#pt-login': | |
default: | |
modal_dialog.attr('data-active-tab', '#pt-login'); | |
break; | |
} | |
jQuery('#pt-user-modal').modal('show'); | |
} | |
function pt_close_login_dialog(){ | |
jQuery('#pt-user-modal').modal('hide'); | |
} | |
jQuery(function($){ | |
"use strict"; | |
/*************************** | |
** LOGIN / REGISTER DIALOG | |
***************************/ | |
// Open login/register modal | |
$('[href="#pt-login"], [href="#pt-register"]').click(function(e){ | |
e.preventDefault(); | |
pt_open_login_dialog( $(this).attr('href') ); | |
}); | |
// Switch forms login/register | |
$('.modal-footer a, a[href="#pt-reset-password"]').click(function(e){ | |
e.preventDefault(); | |
$('#pt-user-modal .modal-dialog').attr('data-active-tab', $(this).attr('href')); | |
}); | |
// Post login form | |
$('#pt_login_form').on('submit', function(e){ | |
e.preventDefault(); | |
var button = $(this).find('button'); | |
button.button('loading'); | |
$.post(ptajax.ajaxurl, $('#pt_login_form').serialize(), function(data){ | |
var obj = $.parseJSON(data); | |
$('.pt-login .pt-errors').html(obj.message); | |
if(obj.error == false){ | |
$('#pt-user-modal .modal-dialog').addClass('loading'); | |
window.location.reload(true); | |
button.hide(); | |
} | |
button.button('reset'); | |
}); | |
}); | |
// Post register form | |
$('#pt_registration_form').on('submit', function(e){ | |
e.preventDefault(); | |
var button = $(this).find('button'); | |
button.button('loading'); | |
$.post(ptajax.ajaxurl, $('#pt_registration_form').serialize(), function(data){ | |
var obj = $.parseJSON(data); | |
$('.pt-register .pt-errors').html(obj.message); | |
if(obj.error == false){ | |
$('#pt-user-modal .modal-dialog').addClass('registration-complete'); | |
// window.location.reload(true); | |
button.hide(); | |
} | |
button.button('reset'); | |
}); | |
}); | |
if(window.location.hash == '#login'){ | |
pt_open_login_dialog('#pt-login'); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* Bootstrap v3.3.5 (http://getbootstrap.com) | |
* Copyright 2011-2016 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
*/ | |
/*! | |
* Generated using the Bootstrap Customizer (http://getbootstrap.com/customize/?id=853fe4082743c174b300) | |
* Config saved to config.json and https://gist.github.com/853fe4082743c174b300 | |
*/ | |
if (typeof jQuery === 'undefined') { | |
throw new Error('Bootstrap\'s JavaScript requires jQuery') | |
} | |
+function ($) { | |
'use strict'; | |
var version = $.fn.jquery.split(' ')[0].split('.') | |
if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 2)) { | |
throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3') | |
} | |
}(jQuery); | |
/* ======================================================================== | |
* Bootstrap: button.js v3.3.6 | |
* http://getbootstrap.com/javascript/#buttons | |
* ======================================================================== | |
* Copyright 2011-2015 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
* ======================================================================== */ | |
+function ($) { | |
'use strict'; | |
// BUTTON PUBLIC CLASS DEFINITION | |
// ============================== | |
var Button = function (element, options) { | |
this.$element = $(element) | |
this.options = $.extend({}, Button.DEFAULTS, options) | |
this.isLoading = false | |
} | |
Button.VERSION = '3.3.6' | |
Button.DEFAULTS = { | |
loadingText: 'loading...' | |
} | |
Button.prototype.setState = function (state) { | |
var d = 'disabled' | |
var $el = this.$element | |
var val = $el.is('input') ? 'val' : 'html' | |
var data = $el.data() | |
state += 'Text' | |
if (data.resetText == null) $el.data('resetText', $el[val]()) | |
// push to event loop to allow forms to submit | |
setTimeout($.proxy(function () { | |
$el[val](data[state] == null ? this.options[state] : data[state]) | |
if (state == 'loadingText') { | |
this.isLoading = true | |
$el.addClass(d).attr(d, d) | |
} else if (this.isLoading) { | |
this.isLoading = false | |
$el.removeClass(d).removeAttr(d) | |
} | |
}, this), 0) | |
} | |
Button.prototype.toggle = function () { | |
var changed = true | |
var $parent = this.$element.closest('[data-toggle="buttons"]') | |
if ($parent.length) { | |
var $input = this.$element.find('input') | |
if ($input.prop('type') == 'radio') { | |
if ($input.prop('checked')) changed = false | |
$parent.find('.active').removeClass('active') | |
this.$element.addClass('active') | |
} else if ($input.prop('type') == 'checkbox') { | |
if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false | |
this.$element.toggleClass('active') | |
} | |
$input.prop('checked', this.$element.hasClass('active')) | |
if (changed) $input.trigger('change') | |
} else { | |
this.$element.attr('aria-pressed', !this.$element.hasClass('active')) | |
this.$element.toggleClass('active') | |
} | |
} | |
// BUTTON PLUGIN DEFINITION | |
// ======================== | |
function Plugin(option) { | |
return this.each(function () { | |
var $this = $(this) | |
var data = $this.data('bs.button') | |
var options = typeof option == 'object' && option | |
if (!data) $this.data('bs.button', (data = new Button(this, options))) | |
if (option == 'toggle') data.toggle() | |
else if (option) data.setState(option) | |
}) | |
} | |
var old = $.fn.button | |
$.fn.button = Plugin | |
$.fn.button.Constructor = Button | |
// BUTTON NO CONFLICT | |
// ================== | |
$.fn.button.noConflict = function () { | |
$.fn.button = old | |
return this | |
} | |
// BUTTON DATA-API | |
// =============== | |
$(document) | |
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { | |
var $btn = $(e.target) | |
if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn') | |
Plugin.call($btn, 'toggle') | |
if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() | |
}) | |
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { | |
$(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)) | |
}) | |
}(jQuery); | |
/* ======================================================================== | |
* Bootstrap: modal.js v3.3.6 | |
* http://getbootstrap.com/javascript/#modals | |
* ======================================================================== | |
* Copyright 2011-2015 Twitter, Inc. | |
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) | |
* ======================================================================== */ | |
+function ($) { | |
'use strict'; | |
// MODAL CLASS DEFINITION | |
// ====================== | |
var Modal = function (element, options) { | |
this.options = options | |
this.$body = $(document.body) | |
this.$element = $(element) | |
this.$dialog = this.$element.find('.modal-dialog') | |
this.$backdrop = null | |
this.isShown = null | |
this.originalBodyPad = null | |
this.scrollbarWidth = 0 | |
this.ignoreBackdropClick = false | |
if (this.options.remote) { | |
this.$element | |
.find('.modal-content') | |
.load(this.options.remote, $.proxy(function () { | |
this.$element.trigger('loaded.bs.modal') | |
}, this)) | |
} | |
} | |
Modal.VERSION = '3.3.6' | |
Modal.TRANSITION_DURATION = 300 | |
Modal.BACKDROP_TRANSITION_DURATION = 150 | |
Modal.DEFAULTS = { | |
backdrop: true, | |
keyboard: true, | |
show: true | |
} | |
Modal.prototype.toggle = function (_relatedTarget) { | |
return this.isShown ? this.hide() : this.show(_relatedTarget) | |
} | |
Modal.prototype.show = function (_relatedTarget) { | |
var that = this | |
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget }) | |
this.$element.trigger(e) | |
if (this.isShown || e.isDefaultPrevented()) return | |
this.isShown = true | |
this.checkScrollbar() | |
this.setScrollbar() | |
this.$body.addClass('modal-open') | |
this.escape() | |
this.resize() | |
this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this)) | |
this.$dialog.on('mousedown.dismiss.bs.modal', function () { | |
that.$element.one('mouseup.dismiss.bs.modal', function (e) { | |
if ($(e.target).is(that.$element)) that.ignoreBackdropClick = true | |
}) | |
}) | |
this.backdrop(function () { | |
var transition = $.support.transition && that.$element.hasClass('fade') | |
if (!that.$element.parent().length) { | |
that.$element.appendTo(that.$body) // don't move modals dom position | |
} | |
that.$element | |
.show() | |
.scrollTop(0) | |
that.adjustDialog() | |
if (transition) { | |
that.$element[0].offsetWidth // force reflow | |
} | |
that.$element.addClass('in') | |
that.enforceFocus() | |
var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget }) | |
transition ? | |
that.$dialog // wait for modal to slide in | |
.one('bsTransitionEnd', function () { | |
that.$element.trigger('focus').trigger(e) | |
}) | |
.emulateTransitionEnd(Modal.TRANSITION_DURATION) : | |
that.$element.trigger('focus').trigger(e) | |
}) | |
} | |
Modal.prototype.hide = function (e) { | |
if (e) e.preventDefault() | |
e = $.Event('hide.bs.modal') | |
this.$element.trigger(e) | |
if (!this.isShown || e.isDefaultPrevented()) return | |
this.isShown = false | |
this.escape() | |
this.resize() | |
$(document).off('focusin.bs.modal') | |
this.$element | |
.removeClass('in') | |
.off('click.dismiss.bs.modal') | |
.off('mouseup.dismiss.bs.modal') | |
this.$dialog.off('mousedown.dismiss.bs.modal') | |
$.support.transition && this.$element.hasClass('fade') ? | |
this.$element | |
.one('bsTransitionEnd', $.proxy(this.hideModal, this)) | |
.emulateTransitionEnd(Modal.TRANSITION_DURATION) : | |
this.hideModal() | |
} | |
Modal.prototype.enforceFocus = function () { | |
$(document) | |
.off('focusin.bs.modal') // guard against infinite focus loop | |
.on('focusin.bs.modal', $.proxy(function (e) { | |
if (this.$element[0] !== e.target && !this.$element.has(e.target).length) { | |
this.$element.trigger('focus') | |
} | |
}, this)) | |
} | |
Modal.prototype.escape = function () { | |
if (this.isShown && this.options.keyboard) { | |
this.$element.on('keydown.dismiss.bs.modal', $.proxy(function (e) { | |
e.which == 27 && this.hide() | |
}, this)) | |
} else if (!this.isShown) { | |
this.$element.off('keydown.dismiss.bs.modal') | |
} | |
} | |
Modal.prototype.resize = function () { | |
if (this.isShown) { | |
$(window).on('resize.bs.modal', $.proxy(this.handleUpdate, this)) | |
} else { | |
$(window).off('resize.bs.modal') | |
} | |
} | |
Modal.prototype.hideModal = function () { | |
var that = this | |
this.$element.hide() | |
this.backdrop(function () { | |
that.$body.removeClass('modal-open') | |
that.resetAdjustments() | |
that.resetScrollbar() | |
that.$element.trigger('hidden.bs.modal') | |
}) | |
} | |
Modal.prototype.removeBackdrop = function () { | |
this.$backdrop && this.$backdrop.remove() | |
this.$backdrop = null | |
} | |
Modal.prototype.backdrop = function (callback) { | |
var that = this | |
var animate = this.$element.hasClass('fade') ? 'fade' : '' | |
if (this.isShown && this.options.backdrop) { | |
var doAnimate = $.support.transition && animate | |
this.$backdrop = $(document.createElement('div')) | |
.addClass('modal-backdrop ' + animate) | |
.appendTo(this.$body) | |
this.$element.on('click.dismiss.bs.modal', $.proxy(function (e) { | |
if (this.ignoreBackdropClick) { | |
this.ignoreBackdropClick = false | |
return | |
} | |
if (e.target !== e.currentTarget) return | |
this.options.backdrop == 'static' | |
? this.$element[0].focus() | |
: this.hide() | |
}, this)) | |
if (doAnimate) this.$backdrop[0].offsetWidth // force reflow | |
this.$backdrop.addClass('in') | |
if (!callback) return | |
doAnimate ? | |
this.$backdrop | |
.one('bsTransitionEnd', callback) | |
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) : | |
callback() | |
} else if (!this.isShown && this.$backdrop) { | |
this.$backdrop.removeClass('in') | |
var callbackRemove = function () { | |
that.removeBackdrop() | |
callback && callback() | |
} | |
$.support.transition && this.$element.hasClass('fade') ? | |
this.$backdrop | |
.one('bsTransitionEnd', callbackRemove) | |
.emulateTransitionEnd(Modal.BACKDROP_TRANSITION_DURATION) : | |
callbackRemove() | |
} else if (callback) { | |
callback() | |
} | |
} | |
// these following methods are used to handle overflowing modals | |
Modal.prototype.handleUpdate = function () { | |
this.adjustDialog() | |
} | |
Modal.prototype.adjustDialog = function () { | |
var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight | |
this.$element.css({ | |
paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', | |
paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' | |
}) | |
} | |
Modal.prototype.resetAdjustments = function () { | |
this.$element.css({ | |
paddingLeft: '', | |
paddingRight: '' | |
}) | |
} | |
Modal.prototype.checkScrollbar = function () { | |
var fullWindowWidth = window.innerWidth | |
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8 | |
var documentElementRect = document.documentElement.getBoundingClientRect() | |
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left) | |
} | |
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth | |
this.scrollbarWidth = this.measureScrollbar() | |
} | |
Modal.prototype.setScrollbar = function () { | |
var bodyPad = parseInt((this.$body.css('padding-right') || 0), 10) | |
this.originalBodyPad = document.body.style.paddingRight || '' | |
if (this.bodyIsOverflowing) this.$body.css('padding-right', bodyPad + this.scrollbarWidth) | |
} | |
Modal.prototype.resetScrollbar = function () { | |
this.$body.css('padding-right', this.originalBodyPad) | |
} | |
Modal.prototype.measureScrollbar = function () { // thx walsh | |
var scrollDiv = document.createElement('div') | |
scrollDiv.className = 'modal-scrollbar-measure' | |
this.$body.append(scrollDiv) | |
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth | |
this.$body[0].removeChild(scrollDiv) | |
return scrollbarWidth | |
} | |
// MODAL PLUGIN DEFINITION | |
// ======================= | |
function Plugin(option, _relatedTarget) { | |
return this.each(function () { | |
var $this = $(this) | |
var data = $this.data('bs.modal') | |
var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option) | |
if (!data) $this.data('bs.modal', (data = new Modal(this, options))) | |
if (typeof option == 'string') data[option](_relatedTarget) | |
else if (options.show) data.show(_relatedTarget) | |
}) | |
} | |
var old = $.fn.modal | |
$.fn.modal = Plugin | |
$.fn.modal.Constructor = Modal | |
// MODAL NO CONFLICT | |
// ================= | |
$.fn.modal.noConflict = function () { | |
$.fn.modal = old | |
return this | |
} | |
// MODAL DATA-API | |
// ============== | |
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { | |
var $this = $(this) | |
var href = $this.attr('href') | |
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) // strip for ie7 | |
var option = $target.data('bs.modal') ? 'toggle' : $.extend({ remote: !/#/.test(href) && href }, $target.data(), $this.data()) | |
if ($this.is('a')) e.preventDefault() | |
$target.one('show.bs.modal', function (showEvent) { | |
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown | |
$target.one('hidden.bs.modal', function () { | |
$this.is(':visible') && $this.trigger('focus') | |
}) | |
}) | |
Plugin.call($target, option, this) | |
}) | |
}(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function ajax_login_scripts() { | |
wp_enqueue_style( 'user-login', get_template_directory_uri() . '/ajax-login-register/user-login.css', array(), null ); | |
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/ajax-login-register/bootstrap.min.js', array( 'jquery' ), null, true ); | |
wp_enqueue_script( 'ajax-login-register-script', get_template_directory_uri() . '/ajax-login-register/user-login.js', array( 'jquery' ), null, true ); | |
wp_localize_script('ajax-login-register-script', 'ptajax', array( | |
'ajaxurl' => admin_url( 'admin-ajax.php' ), | |
)); | |
} | |
add_action( 'wp_enqueue_scripts', 'ajax_login_scripts' ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#pt-register">Login</a> | |
<a href="#pt-login">Register</a> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
require get_template_directory() . '/ajax-login-register/ajax-login-register.php'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 1050; | |
display: none; | |
overflow: hidden; | |
-webkit-overflow-scrolling: touch; | |
outline: 0; | |
} | |
.fade { | |
opacity: 0; | |
-webkit-transition: opacity .15s linear; | |
-o-transition: opacity .15s linear; | |
transition: opacity .15s linear; | |
} | |
.fade.in { | |
opacity: 1; | |
} | |
.modal-dialog { | |
position: relative; | |
width: auto; | |
margin: 30px 10px; | |
} | |
.modal.fade .modal-dialog { | |
-webkit-transition: -webkit-transform .3s ease-out; | |
-o-transition: -o-transform .3s ease-out; | |
transition: transform .3s ease-out; | |
-webkit-transform: translate(0,-25%); | |
-ms-transform: translate(0,-25%); | |
-o-transform: translate(0,-25%); | |
transform: translate(0,-25%); | |
} | |
.modal.in .modal-dialog { | |
-webkit-transform: translate(0,0); | |
-ms-transform: translate(0,0); | |
-o-transform: translate(0,0); | |
transform: translate(0,0); | |
} | |
.modal-content { | |
position: relative; | |
background-color: #fff; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
border: 1px solid #999; | |
border: 1px solid rgba(0,0,0,.2); | |
/*border-radius: 6px;*/ | |
outline: 0; | |
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); | |
box-shadow: 0 3px 9px rgba(0,0,0,.5); | |
} | |
.modal-body { | |
position: relative; | |
padding: 40px; | |
} | |
.modal-footer { | |
padding: 20px 40px; | |
text-align: center; | |
border-top: 1px solid #e5e5e5; | |
} | |
.modal-backdrop { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 1040; | |
background-color: #000; | |
} | |
.modal-backdrop.fade { | |
filter: alpha(opacity=0); | |
opacity: 0; | |
} | |
.modal-backdrop.in { | |
filter: alpha(opacity=50); | |
opacity: .5; | |
} | |
.pt-register, .pt-login, .pt-reset-password, .pt-register-footer, .pt-login-footer { | |
display: none; | |
} | |
div[data-active-tab="#pt-reset-password"] .pt-reset-password, | |
div[data-active-tab="#pt-reset-password"] .pt-login-footer, | |
div[data-active-tab="#pt-login"] .pt-login, | |
div[data-active-tab="#pt-register"] .pt-register, | |
div[data-active-tab="#pt-register"] .pt-login-footer, | |
div[data-active-tab="#pt-login"] .pt-register-footer { | |
display: block; | |
} | |
.pt-loading { | |
display: none; | |
} | |
.alert { | |
padding: 15px; | |
margin-bottom: 20px; | |
border: 1px solid transparent; | |
border-radius: 4px; | |
} | |
.alert>p, .alert>ul { | |
margin-bottom: 0; | |
} | |
.alert-danger { | |
color: #a94442; | |
background-color: #f2dede; | |
border-color: #ebccd1; | |
} | |
.alert-warning { | |
color: #8a6d3b; | |
background-color: #fcf8e3; | |
border-color: #faebcc; | |
} | |
.alert-success { | |
color: #3c763d; | |
background-color: #dff0d8; | |
border-color: #d6e9c6; | |
} | |
.alert-info { | |
color: #31708f; | |
background-color: #d9edf7; | |
border-color: #bce8f1; | |
} | |
.close { | |
float: right; | |
font-size: 21px; | |
font-weight: 700; | |
line-height: 1; | |
color: #000; | |
text-shadow: 0 1px 0 #fff; | |
filter: alpha(opacity=20); | |
opacity: .2; | |
} | |
button.close { | |
-webkit-appearance: none; | |
padding: 0; | |
cursor: pointer; | |
background: 0 0; | |
border: 0; | |
} | |
#pt-user-modal h3 { | |
clear: none; | |
margin-bottom: 20px; | |
} | |
.form-field { | |
margin: 20px 0; | |
position: relative; | |
} | |
@media (min-width: 768px) { | |
.modal-dialog { | |
width: 600px; | |
margin: 70px auto; | |
} | |
.modal-content { | |
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); | |
box-shadow: 0 5px 15px rgba(0,0,0,.5); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.modal { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 1050; | |
display: none; | |
overflow: hidden; | |
-webkit-overflow-scrolling: touch; | |
outline: 0; | |
} | |
.fade { | |
opacity: 0; | |
-webkit-transition: opacity .15s linear; | |
-o-transition: opacity .15s linear; | |
transition: opacity .15s linear; | |
} | |
.fade.in { | |
opacity: 1; | |
} | |
.modal-dialog { | |
position: relative; | |
width: auto; | |
margin: 30px 10px; | |
} | |
.modal.fade .modal-dialog { | |
-webkit-transition: -webkit-transform .3s ease-out; | |
-o-transition: -o-transform .3s ease-out; | |
transition: transform .3s ease-out; | |
-webkit-transform: translate(0,-25%); | |
-ms-transform: translate(0,-25%); | |
-o-transform: translate(0,-25%); | |
transform: translate(0,-25%); | |
} | |
.modal.in .modal-dialog { | |
-webkit-transform: translate(0,0); | |
-ms-transform: translate(0,0); | |
-o-transform: translate(0,0); | |
transform: translate(0,0); | |
} | |
.modal-content { | |
position: relative; | |
background-color: #fff; | |
-webkit-background-clip: padding-box; | |
background-clip: padding-box; | |
border: 1px solid #999; | |
border: 1px solid rgba(0,0,0,.2); | |
/*border-radius: 6px;*/ | |
outline: 0; | |
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); | |
box-shadow: 0 3px 9px rgba(0,0,0,.5); | |
} | |
.modal-body { | |
position: relative; | |
padding: 40px; | |
} | |
.modal-footer { | |
padding: 40px; | |
text-align: center; | |
border-top: 1px solid #e5e5e5; | |
} | |
.modal-backdrop { | |
position: fixed; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
z-index: 1040; | |
background-color: #000; | |
} | |
.modal-backdrop.fade { | |
filter: alpha(opacity=0); | |
opacity: 0; | |
} | |
.modal-backdrop.in { | |
filter: alpha(opacity=50); | |
opacity: .5; | |
} | |
.pt-register, .pt-login, .pt-reset-password, .pt-register-footer, .pt-login-footer { | |
display: none; | |
} | |
div[data-active-tab="#pt-reset-password"] .pt-reset-password, | |
div[data-active-tab="#pt-reset-password"] .pt-login-footer, | |
div[data-active-tab="#pt-login"] .pt-login, | |
div[data-active-tab="#pt-register"] .pt-register, | |
div[data-active-tab="#pt-register"] .pt-login-footer, | |
div[data-active-tab="#pt-login"] .pt-register-footer { | |
display: block; | |
} | |
.pt-loading { | |
display: none; | |
} | |
.alert { | |
padding: 15px; | |
margin-bottom: 20px; | |
border: 1px solid transparent; | |
border-radius: 4px; | |
} | |
.alert>p, .alert>ul { | |
margin-bottom: 0; | |
} | |
.alert-danger { | |
color: #a94442; | |
background-color: #f2dede; | |
border-color: #ebccd1; | |
} | |
.alert-warning { | |
color: #8a6d3b; | |
background-color: #fcf8e3; | |
border-color: #faebcc; | |
} | |
.alert-success { | |
color: #3c763d; | |
background-color: #dff0d8; | |
border-color: #d6e9c6; | |
} | |
.alert-info { | |
color: #31708f; | |
background-color: #d9edf7; | |
border-color: #bce8f1; | |
} | |
.close { | |
float: right; | |
font-size: 21px; | |
font-weight: 700; | |
line-height: 1; | |
color: #000; | |
text-shadow: 0 1px 0 #fff; | |
filter: alpha(opacity=20); | |
opacity: .2; | |
} | |
button.close { | |
-webkit-appearance: none; | |
padding: 0; | |
cursor: pointer; | |
background: 0 0; | |
border: 0; | |
} | |
#pt-user-modal h3 { | |
clear: none; | |
margin-bottom: 20px; | |
} | |
.form-field { | |
margin: 20px 0; | |
position: relative; | |
} | |
@media (min-width: 768px) { | |
.modal-dialog { | |
width: 600px; | |
margin: 70px auto; | |
} | |
.modal-content { | |
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); | |
box-shadow: 0 5px 15px rgba(0,0,0,.5); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello..
I really want to know how add more fields like a nickname on register part ..
Thank you