jquery实现界面无刷新加载登陆注册

前端之家收集整理的这篇文章主要介绍了jquery实现界面无刷新加载登陆注册前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

官网的登陆注册每次要跳转到另一个界面,能不能做一个简单的,在界面弹出一个框框登陆,我想了想做了这么一个案例,大家来看看成不成

贴上代码,实现了在同一个弹出窗上加载了登陆注册功能!可自由点击!当然样式丑了一些!还请见谅!demo在下面

1这里是html内容

jQuery鼠标点击弹出<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>框<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>






<div id="js_login" class="js_login">
<div class="js_title">

Box">

<div id="_xka_list2" class="hidden">
<div class="de_list">

<form method="post" enctype="multipart/form-data" name="userinfoform" id="userinfoform">

    • 我已阅读并接受《

    2接下来是样式css

    .login-header {
    text-align: center;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    }

    .js_login {
    display: none;
    position: fixed;
    opacity: 1;
    z-index: 11000;
    left: 50%;
    margin-left: -250px;
    top: 100px;
    }

    .js_login a {
    color: blue;
    text-decoration: none;
    }

    .sub_btn1 { /position:absolute; right:0px; top:50px;/
    width:105px;
    height:35px;
    display: inline-block;
    zoom: 1; / zoom and display = ie7 hack for display:inline-block /
    display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    align-content:center
    font: 15px/100% Arial,Helvetica,sans-serif;
    text-shadow: 0 1px 1px rgba(0,.6);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-
    Box-shadow: 0 1px 2px rgba(0,.2);
    -moz-Box-shadow: 0 1px 2px rgba(0,.2);
    Box-shadow: 0 1px 2px rgba(0,.2);
    color: white; /#e8f0de/
    border: solid 1px #538312;
    background: #64991e; / #64991e/
    background: -webkit-gradient(linear,left top,left bottom,from(#43CD80),to(#3CB371)); /#7db72f #4e7d0e/
    background: -moz-linear-gradient(top,#7db72f,#4e7d0e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f',endColorstr='#4e7d0e');
    }

    .sub_btn1:hover {
    background: #538018;
    background: -webkit-gradient(linear,from(#2E8B57),to(#008B45));
    background: -moz-linear-gradient(top,#6b9d28,#436b0c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28',endColorstr='#436b0c');
    }

    .inputbg {
    height: 40px;
    width: 280px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid #eee;
    text-align: left;
    color: #333;
    }

    username * {

    vertical-align: middle;
    }

    .inputsub {
    outline: 0;
    font-family: Tahoma,Geneva,sans-serif;
    font-size: 14px;
    width: 270px;
    float: left;
    border: none;
    text-align: left;
    color: #333;
    margin: 10px 0 3px 8px;
    background: none;
    overflow: hidden;
    }

    .buttons {
    width: 280px;
    margin: 0 auto;
    margin-top: 25px;
    text-align: left;
    }

    login-submokaoba {

    width: 105px;
    height: 35px;
    }

    qql {

    float: right;
    }

    .reg {
    padding: 20px;
    margin: 0 auto;
    width: 280px;
    }

    login {

    margin-top: 20px;
    }

    .hidden {
    display: none;
    }

    .js_login {
    position: absolute;
    width: 500px;
    background: #fff;
    display: none;
    color: #999;
    }

    .js_login .js_title {
    overflow: hidden;
    height: 42px;
    background: #f9f9f9 url(http://www.jiao4.com/java) repeat-x;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }

    .js_login .js_title span {
    float: right;
    line-height: 40px;
    padding: 0 9px;
    cursor: pointer;
    font-family: "";
    font-size: 30px;
    }

    .js_login .js_title span:hover {
    color: #555;
    }

    .js_login .js_title li {
    float: left;
    width: 130px;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 18px;
    cursor: pointer;
    height: 43px;
    }

    .js_login .js_title li a {
    float: left;
    width: 130px;
    text-align: center;
    }

    .js_login .js_title li a:hover {
    }

    .conxk1 {
    border-top: 3px solid #15B300;
    border-right: 1px solid #dfdfdf;
    background: #fff;
    height: 39px;
    line-height: 39px;
    color: #11B200;
    }

    .conxk1 a {
    color: #11B200;
    }

    .conxk1 a:hover {
    color: #11B200;
    text-decoration: none;
    }

    .conxk2 {
    border-right: 1px solid #dfdfdf;
    height: 39px;
    line-height: 39px;
    padding-top: 3px;
    color: #646464;
    }

    .conxk2 a {
    color: #646464;
    }

    .conxk2 a:hover {
    color: #646464;
    text-decoration: none;
    }

    .js_login .js_content {
    overflow: hidden;
    padding: 13px 15px;
    background: #fff;
    border: 1px solid #ccc;
    border-top-width: 0px;
    }

    .js_login .js_content .de_list {
    width: 100%;
    padding-top: 12px;
    }

    .js_login .js_content a:visited {
    color: blue;
    }

    .js_login .js_content a:hover {
    color: red;
    text-decoration: underline;
    }

    .Reg-input {
    display: block;
    clear: both;
    padding: 5px 0;
    }

    .Reg-input li {
    display: inline;
    float: left;
    }

    .Reg-input .input-text {
    width: 220px;
    height: 25px;
    border: 1px solid #ccc;
    outline: none;
    border-radius: 2px;
    }

    .input-text:focus {
    border: 1px solid #339933;
    }

    .Reg-input .Reg-text {
    width: 100px;
    text-align: right;
    font-size: 14px;
    }

    .Reg-input .input_text {
    width: 70px;
    float: left;
    }

    .js_login #checkBox {
    text-align: left;
    }

    .js_login #errmsg {
    color: red;
    }

    .js_login .sub_btn1 {
    font-size: 20px;
    }

    lean_overlay {

    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    display: none;
    }

    后面更上js,记得要把jquery给加上哦!红色区域的代码负责登陆注册点击切换的事件,在代码点击方法加上黄色代码可在点击后加载到当前界面!

    Box"

    } else {
    document.getElementById(tag + i).className = styleb;
    document.getElementById(content + i).className = "hidden"
    }
    }
    };

    function ajaxlogin() {
    var username = $("#logusername");
    var usernameValue = $("#logusername").val();
    var password = $("#logpassword");
    var passwordValue = $("#logpassword").val();
    alert(usernameValue + passwordValue);
         window.location.reload();
    }

    function ajaxzhuce() {
    var usernameValue = $("#UserName").val();
    var passwordValue = $("#Password").val();
    var realNameValue = $("#RealName").val();
    var telephoneValue = $("#Telephone").val();
    var emailValue = $("#Mail").val();
    alert(usernameValue + passwordValue + realNameValue + telephoneValue + emailValue);
         window.location.reload();
    }

    效果图:

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    原文链接:https://www.f2er.com/jquery/46998.html

    猜你在找的jQuery相关文章