javascript - 登录注册弹出窗口-6ren

javascript - 登录注册弹出窗口

转载作者：行者123 更新时间：2023-11-28 07:14:34

当我打开登录和注册门户时，它会打开两个选项卡内容，然后当我单击登录选项卡时，它会打开登录选项卡内容，单击注册选项卡时，它会打开注册选项卡页面。但刷新页面后，弹出窗口再次显示两个选项卡内容![在此处输入图像描述][1]

我无法向您发送快照，因为我需要 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>

最佳答案

在你的代码中，你有两个选项来解决这个问题，第一个是 jquery，第二个是 css。

1) Jquery

加载时触发点击事件。

$('#cont-1').click();

或

<小时/>

2) CSS

在第二个选项卡中添加隐藏类

<div class="tabcontent hide" id="cont-2-1">

并添加 activeLink 类用于登录

<a href="javascript:;" class="inactive activeLink" id="cont-1">Login</a>

CSS 解决方案示例:http://jsfiddle.net/kevalbhatt18/2qw9877d/

Jquery 解决方案示例:http://jsfiddle.net/kevalbhatt18/7zc2r9Lm/

关于javascript - 登录注册弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30972384/

文章推荐： javascript - 导入 Bootstrap 样式表时图像消失

文章推荐： Swift HKCategorySample

文章推荐： ios - 带有 swift 和 Storyboard的 iOS8 中的简单表格 View

文章推荐： jquery - 我的代码在 Safari 上不起作用

javascript (函数(窗口){})(窗口)
https://github.com/mattdiamond/Recorderjs/blob/master/recorder.js中的代码我不明白 JavaScript 语法，比如 (functio
ios - 在 iOS 8 中查找 TopMost 窗口/FrontMost 窗口
在 iOS 7 及更早版本中，如果我们想在应用程序中找到 topMostWindow，我们通常使用以下代码行 [[[UIApplication sharedApplication] windows]
JavaScript 窗口
我已经尝试解决这个问题很长一段时间了:我无法访问窗口的 url，因为它位于另一个域上..有一些解决方案吗？ function login() { var cb = window.ope
c# - 将ffmpeg流传递给c#窗口
是否可以将 FFMPEG 视频流传递到 C# 窗口？现在它在新窗口中作为新进程打开，我只是想将它传递给我自己的 SessionWindow。此时我像这样执行ffplay: public void E
R:窗口()函数
我有一个名为 x 的矩阵看起来像这样: pTime Close 1 1275087600 1.2268 2 1275264000 1.2264 3 1275264300 1.2
emacs - Emacs如何自动跳转到新创建的缓冲区/窗口
在编译时，发生搜索，grep搜索等，Emacs会在单独的窗口中创建一个新的缓冲区来显示结果，有没有自动跳转到那个窗口的方法？这很有用，因为我可以使用 n 和 p 而不是 M-g n 和 M-g p 移
从批处理文件启动时的 PowerShell 窗口
我有一个启动 PowerShell 脚本的批处理文件。批处理文件: START Powershell -executionpolicy RemoteSigned -noexit -file "MyS
cocoa - NSWindowController 窗口？
我有一个基于菜单栏的应用程序，单击图标时会显示一个窗口。在 Mac OS X Lion 上一切正常，但由于某种原因，在 Snow Leopard 和早期版本的 Mac OS X 上会出现错误。任何时候
带有集成标题栏和工具栏的 macOS 窗口？
在 macOS 中，如何在 Xcode 和/或 Interface Builder 中创建带有“集成标题栏和工具栏”的窗口？这是“宽标题栏”类型的窗口，已添加到 OS X 10.10 Yosemit
javascript - 为什么 this == 窗口？
在浏览器 (Chrome) 中 JavaScript: var DataModler = { Data: { Something: 'value' }, Process: functi
javascript - 关闭另一个选项卡/窗口
我有 3 个 html 页面。第 1 页链接到第 2 页，第 2 页链接到第 3 页(为了简单起见)。我希望页面 2 中的链接打开页面 3 并关闭页面 1(选项卡 1)。据我了解，您无法使用 Ja
javascript - 如何使用下拉菜单打开新框架/窗口
当点击“创建节点”按钮时，如何打开一个新的框架或窗口？我希望新框架包含一个文本字段和下拉菜单，以便用户可以选择一个选项。 Create node Search node
托管用户控件的 WPF 窗口
我有一个用户控件，用于编辑应用程序中的某些对象。我最近遇到一个实例，我想弹出一个新的对话框(窗口)来托管此用户控件。如何实例化新窗口并将需要设置的任何属性从窗口传递到用户控件？感谢您的宝贵时间。
kotlin - 具有自定义计数标准的RxJava缓冲区/窗口
我有一个Observable，它发出许多对象，我想使用window或buffer操作对这些对象进行分组。但是，我不想指定count参数来确定窗口中应包含多少个对象，而是希望能够使用自定义条件。例如，
JavaFX 防止在单击按钮时打开新阶段(窗口)
我有以下代码，它打开一个新的 JavaFX 阶段(我们称之为窗口)。 openAlertBox.setOnAction(e -> { AlertBox alert = AlertBox
ios - 如何检查当前的iOS设备是否支持多个场景/窗口？
我要添加一个“在新窗口中打开”上下文菜单项，该菜单项将以新的UIScene打开我的应用程序文档之一。当然，我只想在实际上支持多个场景的设备上显示该菜单项。目前，我只是在检查设备是否是使用旧设备的iP
macos - 我可以使用哪些命令行工具来获取每个平台上当前事件的应用程序/窗口？
我正在尝试创建一个 AIR 应用程序来记录应用程序的使用情况，使用 AIR 从系统获取信息的唯一简单方法是使用命令行工具和抓取标准输出 . 我知道像这样的工具顶部和 ps 对于 OS X，但它们
python - 如何打印一个turtle()窗口？
所以我有这个简单的 turtle 螺旋制作器，我想知道是否有一种方法可以打印出由该程序创建的我的设计副本。代码: import turtle x= float(input("Angle: ")) y
c# - 将快速文本输入发送到另一个进程(窗口)
我正在编写一个 C# WPF 程序，它将文本消息发送到另一个程序的窗口。我有一个宏程序作为我的键盘驱动程序 (Logitech g15) 的一部分，它已经这样做了，尽管它不会将击键直接发送到进程，而是
C 窗口 sendto()
我尝试使用以下代码通过 UDP 发送，但得到了奇怪的结果。 if((sendto(newSocket, sendBuf, totalLength, 0, (SOCKADDR *)&sendAd

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 登录注册弹出窗口