用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如QQ、微信、百度等。现在何问起推荐一个带二维码的登录弹出层，可拖动、关闭，有需要的朋友可以参考一下。

体验效果：
http://hovertree.com/texiao/jquery/91/

结尾附有源码下载。

效果图：

代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<title>jQuery带二维码登录窗口弹出层特效 - 何问起</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />

<link type="text/css" rel="stylesheet" href="css/style.css" />

<style type="text/css">

    .tc{display: block;padding: 1em 1.5em;border: 3px solid #fff;font-weight: 700;margin: 50px auto;background:#1d7db1;color: #fff;}

    .tc a:hover{opacity: 0.6;}

    a{color:blue}

</style>

</head>

<body>

<button class="tc">点击登录</button>

<div id="gray"></div>

<div class="popup" id="popup">

    <div class="top_nav" id='top_nav'>

        <div align="center">

            <span>用户登录</span>

            <a class="guanbi"></a>

        </div>

    </div>

    <div class="min">

        <div class="tc_login">

            <div class="left">

                <h4 align="center">手机扫描</h4>

                <div align="center"><img src="data:images/erweima.png" width="150" height="150" /></div>

                <div id="hovertreedd">

                    <div align="center">扫描二维码登录</div>

                </div>

            </div>

            <div class="right">

                <form method="POST" name="form_login" target="_top">

                    <div align="center">

                        <a href="">短信快捷登录</a>

                        <i class="icon-mobile-phone"></i>

                        <input type="text" name="name" id="name" required="required" placeholder="用户名" autocomplete="off" class="input_yh">

                        <input type="password" name="pass" id="pass" required="required" placeholder="密码" autocomplete="off" class="input_mm">

                    </div>

                    <div id="hovertreedd">

                        <div align="center"><a href="http://hovertree.com/h/bjaf/tuixiangzi.htm" target="_blank">遇到登录问题</a></div>

                    </div>

                    <div align="center">

                        <input type="submit" class="button" title="Sign In" value="登录">

                    </div>

                </form>

                <div id="hovertreedd">

                    <div align="center"><a href="http://hovertree.com/texiao/bootstrap/5/" target="_blank">立即注册</a></div>

                </div>

                <hr align="center" />

                <div align="center">期待更多功能 </div>

            </div>

        </div>

    </div>

</div>

<script src="http://down.hovertree.com/jquery/jquery-1.11.0.min.js" type="text/javascript"></script>

<script type="text/javascript">

    //窗口效果

    //点击登录class为tc 显示

    $(".tc").click(function(){

        $("#gray").show();

        $("#popup").show();//查找ID为popup的DIV show()显示#gray

        tc_center();

    });

    //点击关闭按钮

    $("a.guanbi").click(function(){

        $("#gray").hide();

        $("#popup").hide();//查找ID为popup的DIV hide()隐藏

    })

    //窗口水平居中

    $(window).resize(function(){

        tc_center();

    });

    function tc_center(){

        var _top=($(window).height()-$(".popup").height())/2;

        var _left=($(window).width()-$(".popup").width())/2;

        $(".popup").css({top:_top,left:_left});

    }

    </script>

    <script type="text/javascript">

    $(document).ready(function(){ 

        $(".top_nav").mousedown(function(e){

            $(this).css("cursor","move");//改变鼠标指针的形状

            var offset = $(this).offset();//DIV在页面的位置

            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离

            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

            $(document).bind("mousemove",function(ev){ //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 

                $(".popup").stop();//加上这个之后 

                var _x = ev.pageX - x;//获得X轴方向移动的值

                var _y = ev.pageY - y;//获得Y轴方向移动的值 

                $(".popup").animate({left:_x+"px",top:_y+"px"},10);

            }); 

        }); 

        $(document).mouseup(function() {

            $(".popup").css("cursor","default");

            $(this).unbind("mousemove");

        });

    })

</script>

<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用多种浏览器，如火狐，Chrome，Edge等。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjaf/87a3bdr0.htm" target="_blank">说明</a></p>

</div>

</body>

</html>

源码下载：
http://hovertree.com/h/bjaf/wli3qy07.htm

更多登录注册特效：
http://hovertree.com/hvtart/bjae/dh4pqx2p.htm

http://www.cnblogs.com/roucheng/p/texiao.html

jQuery遮罩层登录对话框的更多相关文章

  1. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  2. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  3. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  4. jquery遮罩层

    (function () { //遮罩层实现 zhe zhao ceng kexb 2016.2.24 $.extend($.fn, { mask: function (msg, maskDivCla ...

  5. jQuery遮罩层效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. bootstrap只有遮罩层没有对话框的解决方法

    前端很差很差,猜测应该是各种js冲突的问题,换了一个jquery或bootstrap版本的不兼容. https://blog.csdn.net/Pabebe/article/details/70230 ...

  7. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  8. jquery 遮罩层指定位置

    .css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...

  9. Jquery实现遮罩层，就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

随机推荐

  1. REST简介

    一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式.”但是在要求详细讲述它所提出的各个约束,以及如何开始搭建REST服务时,却很少有人能够清晰地说出它到底是什么,需要遵守什么样的准则. ...

  2. CENTOS 6.5 平台离线编译安装 PHP5.6.6

    一.下载php源码包 http://cn2.php.net/get/php-5.6.6.tar.gz/from/this/mirror 二.编译 编译之前可能会缺少一些必要的依赖包,加载一个本地yum ...

  3. Android之常见问题集锦Ⅱ

    Android问题集锦Ⅰ:http://www.cnblogs.com/AndroidJotting/p/4608025.html EditText输入内容改变事件监听 _edit.addTextCh ...

  4. JavaScript正则表达式，你真的知道？

    一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...

  5. Android实现TCP断点上传，后台C#服务实现接收

    终端实现大文件上传一直都是比较难的技术,其中涉及到后端与前端的交互,稳定性和流量大小,而且实现原理每个人都有自己的想法,后端主流用的比较多的是Http来实现,因为大多实现过断点下载.但稳定性不能保证, ...

  6. Asp.Net 操作XML文件的增删改查 利用GridView

    不废话,直接上如何利用Asp.NET操作XML文件,并对其属性进行修改,刚开始的时候,是打算使用JS来控制生成XML文件的,但是最后却是无法创建文件,读取文件则没有使用了 index.aspx 文件 ...

  7. jquery.cookie的使用

    今天想到了要为自己的影像日记增加赞的功能,并且需要用到cookie. 记得原生的js操作cookie也不是很麻烦的,但似乎jquery更简单,不过相比原生js,需要额外引入2个文件,似乎又不是很好,但 ...

  8. .NET中AOP方便之神SheepAspect

    SheepAspect 简介以及代码示列: SheepAspect是一个AOP框架为.NET平台,深受AspectJ.它静织目标组件作为一个编译后的任务(编译时把AOP代码植入). 多有特性时,可根据 ...

  9. 【Java学习系列】第3课--Java 高级教程

    本文地址 可以拜读: 从零开始学 Java 分享提纲: 1. Java数据结构 2. Java 集合框架 3. Java泛型 4. Java序列化 5. Java网络编程 6. Java发送Email ...

  10. 笔记：Memory Notification: Library Cache Object loaded into SGA

    笔记:Memory Notification: Library Cache Object loaded into SGA在警告日志中发现一些这样的警告信息:Mon Nov 21 14:24:22 20 ...