这次给大家分享的是目前很多网站中流行的弹出式登录框，如下面的腾讯网登录界面，采用弹出式登录的好处是大大提升了网站的用户体验和交互性，用户不用重新跳转到指定的页面就能登录，非常方便

先来个演示地址

要实现这个功能的大致思路是：

1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框

2.其次在页面合适位置制作两个<div>，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"

3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换

4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行

上代码:

sign.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>sign</title>

     <style>

         body {

             text-align: center;

             background-color: burlywood;

         }

         .signform {

             font-family: 微软雅黑;

             position: fixed;

             background-color: white;

             top: 20%;

             left: 30%;

             width: 500px;

             height: 400px;

             border-radius: 1em;

             text-align: center;

             z-index: 999;

         }

         #registerform {

             height: 450px;

         }

         .signclose {

             cursor: pointer;

             float: right;

             overflow: hidden;

             text-align: center;

             position: relative;

             height: 35px;

             width: 35px;

             margin-top: 10px;

             margin-right: 10px;

         }

         #registerloading{

             position: absolute;

             width: 25px;

             height: 25px;

             left: 410px;

             top: 90px;

         }

         .signinput {

             text-align: center;

             border-radius: 0.2em;

             width: 280px;

             height: 45px;

             border: none;

             background-color:#f2f2f2;

             font-size: 28px;

         }

         .signinput::-webkit-input-placeholder {

             font-size: 26px;

         }

         .userdiv {

             position: relative;

             margin-top: 80px;

         }

         .pwddiv {

             position: relative;

             margin-top: 20px;

         }

         .postdiv {

             position: relative;

             margin-top: 20px;

         }

         .postdiv button {

             cursor: pointer;

             color: white;

             font-size: 26px;

             border: none;

             border-radius: 0.4em;

             width: 280px;

             height: 45px;

             background-color:#4CAF50;

         }

     </style>

     <link rel="stylesheet" href="css/sign.css">

 </head>

 <body>

 <div>

     <button id="displaysign" onclick="start()">点击登录</button>

 </div>

 <div class="signform" id="signform" style="display: none">

     <div class="signclose">

         <img src="data:image/signclose.ico" width="35px" height="35px" onclick="signclose()">

     </div>

     <div class="userdiv">

     <input id="user" class="signinput" type="text" placeholder="用户名" name="user" >

     </div>

     <div class="pwddiv">

     <input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd">

     </div>

     <div class="postdiv">

     <button>登录</button>

     </div>

     <br>

     <div class="change" style="color: #4d4d4d">

         <p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p>

     </div>

 </div>

 <div class="signform" id="registerform" style="display: none">

         <div class="signclose">

             <img src="data:image/signclose.ico" width="35px" height="35px" onclick="signclose()">

         </div>

         <div class="userdiv">

             <input  id="registeruser" class="signinput" onblur="loading()" type="text" placeholder="用户名" name="user">

         </div>

     <img src="data:image/signloading.gif" style="display: none" id="registerloading">

         <div class="pwddiv">

             <input  id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd">

         </div>

         <div class="pwddiv">

             <input  id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd">

         </div>

         <div class="postdiv">

             <button>注册</button>

         </div>

         <br>

         <div class="change" style="color: #4d4d4d">

             <p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p>

         </div>

 </div>

 </body>

 <script src="js/jquery-3.1.1.min.js"></script>

 <script src="js/signformchange.js"></script>

 </html>

sign.css

body {

    text-align: center;

    background-color: burlywood;

}

#displaysign{

    position: relative;

    top: 80px;

    width: 70px;

    height: 40px;

}

.signform {

    font-family: 微软雅黑;

    position: fixed;

    background-color: white;

    top: 20%;

    left: 30%;

    width: 500px;

    height: 400px;

    border-radius: 1em;

    text-align: center;

    z-index:;

}

#registerform {

    height: 450px;

}

.signclose {

    cursor: pointer;

    float: right;

    overflow: hidden;

    text-align: center;

    position: relative;

    height: 35px;

    width: 35px;

    margin-top: 10px;

    margin-right: 10px;

}

#registerloading{

    position: absolute;

    width: 25px;

    height: 25px;

    left: 410px;

    top: 90px;

}

.signinput {

    text-align: center;

    border-radius: 0.2em;

    width: 280px;

    height: 45px;

    border: none;

    background-color:#f2f2f2;

    font-size: 28px;

}

.signinput::-webkit-input-placeholder {

    font-size: 26px;

}

.userdiv {

    position: relative;

    margin-top: 80px;

}

.pwddiv {

    position: relative;

    margin-top: 20px;

}

.postdiv {

    position: relative;

    margin-top: 20px;

}

.postdiv button {

    cursor: pointer;

    color: white;

    font-size: 26px;

    border: none;

    border-radius: 0.4em;

    width: 280px;

    height: 45px;

    background-color:#4CAF50;

}

signformchange.js

$(function ()

{

        $('.change a').click(function ()

        {

            $('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');

        });

})

function start() {

document.getElementById('signform').style.display=""

}

function signclose() {

    document.getElementById('signform').style.display="none"

    document.getElementById('registerform').style.display="none"

}

function loading() {

    document.getElementById('registerloading').style.display=""

}

web全栈开发之网站开发二（弹出式登录注册框前端实现-类腾讯）的更多相关文章

  1. web全栈后台权限管理系统（VUE+ElementUi+nodeJs+koa2）

    web全栈后台权限管理系统(VUE+ElementUi+nodeJs+koa2) 主要技术 前端 vue 全家桶 ElementUI 后端 Node.js Koa2 Mongoess 数据库 mong ...

  2. 处女作《Web全栈开发进阶之路》出版了！

    书中源码下载地址:https://github.com/qinggee/WebAdvanced 01. 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块. ...

  3. Web 全栈开发 MySQL 面试题

    Web 全栈开发 MySQL 面试题 MySQL MySQL 读写分离 读写分离原理 MySQL的主从复制和MySQL的读写分离两者有着紧密联系,首先部署主从复制,只有主从复制完了,才能在此基础上进行 ...

  4. Web 全栈开发 Redis 面试题

    Web 全栈开发 Redis 面试题 Redis 大 key 问题 https://www.cnblogs.com/xgqfrms/p/13601959.html Redis 数据结构 Redis 初 ...

  5. 从 rails 窥探 web 全栈开发（零）

    从 rails 窥探 web 全栈开发(零) 本文将讲述在学习之前几个必须要知道的概念,这些词汇在 rails 中都会出现. 本文前置条件:安装好 Ruby. 从 rails 窥探 web 全栈开发( ...

  6. 使用IntelliJ IDEA开发SpringMVC网站（二）框架配置

    原文:使用IntelliJ IDEA开发SpringMVC网站(二)框架配置 摘要 讲解如何配置SpringMVC框架xml,以及如何在Tomcat中运行 目录[-] 文章已针对IDEA 15做了一定 ...

  7. Web 全栈大会：万维网之父的数据主权革命

    大家好,今天我和大家分享一下由万维网之父发起的一场数据主权革命.什么叫数据主权?很容易理解,现在我们的数据是把持在巨头手里的,你的微信通讯录和聊天记录都无法导出,不管是从人权角度还是从法理角度,这些数 ...

  8. 基于LeanCloud云引擎的Web全栈方案

    LeanEngine-Full-Stack The FULL STACK DEVELOPER 复杂的项目, 协作分工, 自动化流程,代码组织结构,框架选择,国际化方案等 Generator 或者See ...

  9. 《web全栈工程师的自我修养》阅读笔记

    在买之前以为这本书是教你怎么去做一个web全栈工程师,以及介绍需要掌握的哪些技术的书,然而看的过程中才发现,是一本方法论的书.读起来的感觉有点像红衣教主的<我的互联网方法论>,以一些自己的 ...

随机推荐

  1. C++ 可配置的类工厂

    项目中常用到工厂模式,工厂模式可以把创建对象的具体细节封装到Create函数中,减少重复代码,增强可读和可维护性.传统的工厂实现如下: class Widget { public: virtual i ...

  2. 【java】Naming.bind和Registry.bind区别

    Naming类和Registry类均在java.rmi包 Naming类通过解析URI绑定远程对象,将URI拆分成主机.端口和远程对象名称,使用的仍是Registry类. public static ...

  3. Java8实战分享

    虽然很多人已经使用了JDK8,看到不少代码,貌似大家对于Java语言or SDK的使用看起来还是停留在7甚至6. Java8在流式 or 链式处理,并发 or 并行方面增强了很多,函数式的风格使代码可 ...

  4. Intellij idea添加单元测试工具

    1.idea 版本是14.0.0 ,默认带有Junit,但是不能自动生成单元测试,需要下载JunitGererator2.0插件 2.Settings -Plugins,下载 JunitGenerat ...

  5. Centos6.5下编译安装mysql 5.6

    一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | grep mysql 有的话通过下面的命令来卸载掉 rpm -e mysql //普通删除模式 rpm -e ...

  6. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  7. shiro权限管理框架与springmvc整合

    shiro是apache下的一个项目,和spring security类似,用于用户权限的管理‘ 但从易用性和学习成本上考虑,shiro更具优势,同时shiro支持和很多接口集成 用户及权限管理是众多 ...

  8. PHP之GD函数的使用

    本文讲解常用GD函数的应用 1.一个简单的图像 我们先看一个例子: <?php $w = 200; $h = 200; $img = imagecreatetruecolor($w,$h); $ ...

  9. AFNetworking 3.0 源码解读 总结（干货）（上）

    养成记笔记的习惯,对于一个软件工程师来说,我觉得很重要.记得在知乎上看到过一个问题,说是人类最大的缺点是什么?我个人觉得记忆算是一个缺点.它就像时间一样,会自己消散. 前言 终于写完了 AFNetwo ...

  10. python 入门笔记

    1.pip包安装 pip install *** pip 中http和https代理设置(/etc/profile) 2.强制保存 :w !sudo tee % 3.cffi是python调用C的包 ...