问登录注册PopUp
EN

Stack Overflow用户

提问于 2015-06-22 05:02:36

回答 1查看 1.2K关注 0票数 1

当我打开登录和signUp门户时，它与两个选项卡内容一起打开，然后当我单击Login选项卡时，它打开登录选项卡内容，然后单击注册表选项卡页。但是在刷新页面后，再次弹出显示两个选项卡内容的页面。

我无法发送快照，因为我需要10个名誉来发布图片。

这是弹出窗口的代码：

<html>
<style>
.quick_signup{
    cursor:pointer;
}
body {font-family:Verdana, Arial, Helvetica, sans-serif;}
.tab-box { 
  border-bottom: 1px solid #DDD;
  padding-bottom:5px;
}
.tab-box a {
  border:1px solid #DDD;
  color:#666666;
  padding: 5px 15px;
  text-decoration:none;
  background-color: #eee;
}
.tab-box a.activeLink { 
  background-color: #fff; 
  border-bottom: 0; 
  padding: 6px 15px;
}
.tabcontent { border: 1px solid #ddd; border-top: 0; padding: 5px;}
.hide { display: none;}

.small { color: #999; margin-top: 100px; border: 1px solid #EEE; padding: 5px; font-size: 9px; font-family:Verdana, Arial, Helvetica, sans-serif; }
</style>
<head>
<script type="text/javascript">
  $(document).ready(function() {
    $(".inactive").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".inactive").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  
  });
</script>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/1.css" />
</head>

<body>
<div id="user">
<div id="modal-quicksignup" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="tab-box"> 
                    <a href="javascript:;" class="inactive" id="cont-1">Login</a> 
                    <a href="javascript:;" class="inactive " id="cont-2">SignUp</a> 

  </div>
         <a id="popup" onclick="div_show()"><?php echo $text_signin_register; ?></a>

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title main-heading"><?php echo $text_signin_register ?></h4>
            </div>
        <div class="modal-body">
            <div class="row">
            <div class="tabcontent" id="cont-1-1">
                <div class="col-sm-6 quick-login">
                    <h4 class="modal-title"><?php echo $text_returning ?></h4>
                    <span><?php echo $text_returning_customer ?></span>

                    <div class="form-group required">
                        <label class="control-label" for="input-email"><?php echo $entry_email; ?></label>
                        <input type="text" name="email" value=""  id="input-email" class="form-control" />
                    </div>
                    <div class="form-group required">
                        <label class="control-label" for="input-password"><?php echo $entry_password; ?></label>
                        <input type="password" name="password" value="" id="input-password" class="form-control" />
                    </div>
                    <div class="form-group">
                    <button type="button" class="btn btn-primary loginaccount"  data-loading-text="<?php echo $text_loading; ?>"><?php echo $button_login ?></button>
                    </div>
                    <div class="form-group">
                    <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a>
                    </div>
                </div>
                <div class="social_sign_in"> <b>Do you have your social account?</b>
                                     <div class="facebook_google_login_button">

                                       <div class="facebookButtonImageOverlay" style="cursor: pointer;" onclick="return fblogin();">
                                            <a href="https://www.facebook.com/login/"><img src="catalog/view/theme/default/image/facebook.png" alt="facebook"></a>
                                        </div>
                                        <div class="googleButtonImageOverlay" style="cursor: pointer;" onclick="return fblogin();">
                                            <a href="https://accounts.google.com/Login?hl=en"><img src="catalog/view/theme/default/image/google.png" title="google" alt="google"></a>
                                        </div>
                                     </div>
                                     </div>
                </div>
                <div class="tabcontent" id="cont-2-1">

                <div class="col-sm-6 quick-register">
                    <h4 class="modal-title"><?php echo $text_new_customer ?></h4>
                    <span><?php echo $text_details; ?></span>
                    <div class="form-group required">
                        <label class="control-label" for="input-name"><?php echo $entry_name; ?></label>
                        <input type="text" name="name" value="" id="input-name" class="form-control" />
                    </div>
                    <div class="form-group required">
                        <label class="control-label" for="input-email"><?php echo $entry_email; ?></label>
                        <input type="text" name="email" value="" id="input-email" class="form-control" />
                    </div>
                    <div class="form-group required">
                        <label class="control-label" for="input-telephone"><?php echo $entry_telephone; ?></label>
                        <input type="text" name="telephone" value="" id="input-telephone" class="form-control" />
                    </div>
                    <div class="form-group required">
                        <label class="control-label" for="input-password"><?php echo $entry_password; ?></label>
                        <input type="password" name="password" value="" id="input-password" class="form-control" />
                    </div>
                    <?php if ($text_agree) { ?>
                    <div class="buttons">
                      <div class="pull-right">
                        <input type="checkbox" name="agree" value="1" />&nbsp;<?php echo $text_agree; ?>
                        <button type="button" class="btn btn-primary createaccount"  data-loading-text="<?php echo $text_loading; ?>" ><?php echo $button_continue; ?></button>
                      </div>
                    </div>
                    <?php }else{ ?>
                    <div class="buttons">
                        <div class="pull-right">
                            <button type="button" class="btn btn-primary createaccount" data-loading-text="<?php echo $text_loading; ?>" ><?php echo $button_continue; ?></button>
                        </div>
                    </div>
                    <?php } ?>
                </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
</div>
</body>

<script type="text/javascript"><!--
$(document).delegate('.quick_signup', 'click', function(e) {
    $('#modal-quicksignup').modal('show');
});
//--></script>
<script type="text/javascript"><!--
$('.quick-register input').on('keydown', function(e) {
    if (e.keyCode == 13) {
        $('.quick-register .createaccount').trigger('click');
    }
});
$('.quick-register .createaccount').click(function() {
    $.ajax({
        url: 'index.php?route=common/quicksignup/register',
        type: 'post',
        data: $('.quick-register input[type=\'text\'], .quick-register input[type=\'password\'], .quick-register input[type=\'checkbox\']:checked'),
        dataType: 'json',
        beforeSend: function() {
            $('.quick-register .createaccount').button('loading');
            $('#modal-quicksignup .alert-danger').remove();
        },
        complete: function() {
            $('.quick-register .createaccount').button('reset');
        },
        success: function(json) {
            $('.modal-quicksignup .form-group').removeClass('has-error');

            if(json['islogged']){
                 window.location.href="index.php?route=account/account";
            }
            if (json['error_name']) {
                $('.quick-register #input-name').parent().addClass('has-error');
                $('.quick-register #input-name').focus();
            }
            if (json['error_email']) {
                $('.quick-register #input-email').parent().addClass('has-error');
                $('.quick-register #input-email').focus();
            }
            if (json['error_telephone']) {
                $('.quick-register #input-telephone').parent().addClass('has-error');
                $('.quick-register #input-telephone').focus();
            }
            if (json['error_password']) {
                $('.quick-register #input-password').parent().addClass('has-error');
                $('.quick-register #input-password').focus();
            }
            if (json['error']) {
                $('#modal-quicksignup .modal-header').after('<div class="alert alert-danger" style="margin:5px;"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
            }

            if (json['now_login']) {
                $('.quick-login').before('<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a><ul class="dropdown-menu dropdown-menu-right"><li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li><li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li><li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li><li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li><li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li></ul></li>');

                $('.quick-login').remove();
            }
            if (json['success']) {
                $('#modal-quicksignup .main-heading').html(json['heading_title']);
                success = json['text_message'];
                success += '<div class="buttons"><div class="text-right"><a onclick="loacation();" class="btn btn-primary">'+ json['button_continue'] +'</a></div></div>';
                $('#modal-quicksignup .modal-body').html(success);
            }
        }
    });
});
//--></script>
<script type="text/javascript"><!--
$('.quick-login input').on('keydown', function(e) {
    if (e.keyCode == 13) {
        $('.quick-login .loginaccount').trigger('click');
    }
});
$('.quick-login .loginaccount').click(function() {
    $.ajax({
        url: 'index.php?route=common/quicksignup/login',
        type: 'post',
        data: $('.quick-login input[type=\'text\'], .quick-login input[type=\'password\']'),
        dataType: 'json',
        beforeSend: function() {
            $('.quick-login .loginaccount').button('loading');
            $('#modal-quicksignup .alert-danger').remove();
        },
        complete: function() {
            $('.quick-login .loginaccount').button('reset');
        },
        success: function(json) {
            $('#modal-quicksignup .form-group').removeClass('has-error');
            if(json['islogged']){
                 window.location.href="index.php?route=account/account";
            }

            if (json['error']) {
                $('#modal-quicksignup .modal-header').after('<div class="alert alert-danger" style="margin:5px;"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + '</div>');
                $('.quick-login #input-email').parent().addClass('has-error');
                $('.quick-login #input-password').parent().addClass('has-error');
                $('.quick-login #input-email').focus();
            }
            if(json['success']){
                loacation();
                $('#modal-quicksignup').modal('hide');
            }

        }
    });
});
//--></script>
<script type="text/javascript"><!--
function loacation() {
    location.reload();
}
//--></script>

javascript

回答 1

Stack Overflow用户

发布于 2015-06-22 06:19:20

我认为这可能对你有帮助：

JSFiddle

替换以下代码：

 $(document).ready(function() {
    $(".inactive").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".inactive").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  
  });

使用以下代码：更新了

 $("#cont-2-1").hide();
 $(document).ready(function () {
     $(".inactive").click(function () {
         var curClick = this.id;
         $(".inactive").removeClass("tab-box-active");
         $("#" + curClick).addClass("tab-box-active");
         $(".tabcontent").hide();
         $("#" + curClick + "-1").fadeIn();
     });
 });

CSS:更新的

.quick_signup {
    cursor:pointer;
}
body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
.tab-box {
    border-bottom: 1px solid #DDD;
    padding-bottom:5px;
}
.tab-box a {
    padding: 5px 15px;
    text-decoration:none;
}
.tab-box .inactive {
    background-color: #eee;
    border:1px solid #DDD;
    color:#666666;
}
.tab-box-active {
    background-color: #fff !important;
    border-bottom: 0 !important;
    padding: 6px 15px !important;
}
.tabcontent {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 5px;
}
.hide {
    display: none;
}
.small {
    color: #999;
    margin-top: 100px;
    border: 1px solid #EEE;
    padding: 5px;
    font-size: 9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30972384

复制

相似问题

问登录注册PopUp
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问登录注册PopUpEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问登录注册PopUp
EN