用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如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. 日期格式代码出现两次的错误 ORA-01810

    错误的原因是使用了两次MM . 一.Oracle中使用to_date()时格式化日期需要注意格式码 如:select to_date('2005-01-01 11:11:21','yyyy-MM-dd ...

  2. 【解决方案】Myeclipse 10 安装 GIT 插件 集成 步骤 图解

    工程开发中,往往要使用到集成GIT ,那么下面说说插件安装步骤 PS:以Myeclipse 10 为例,讲解集成安装步骤. ----------------------main------------ ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统（71）-微信公众平台开发-公众号管理

    系列目录 思维导图 下面我们来看一个思维导图,这样就可以更快了解所需要的功能: 上一节我们利用了一个简单的代码例子,完成了与微信公众号的对话(给公众号发一条信息,并得到回复) 这一节将讲解公众号如何设 ...

  4. TypeScript为Zepto编写LazyLoad插件

    平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jqu ...

  5. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍（一）

    集群概念介绍(一)) 白宁超 2015年7月16日 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习 ...

  6. STM32F429 LCD程序移植

    STM32F429自带LCD驱动器,这一具有功能给我等纠结于屏幕驱动的程序员带来了很大的福音.有经验的读者一定有过这样的经历,用FSMC驱动带由控制器的屏幕时候,一旦驱动芯片更换,则需要重新针对此驱动 ...

  7. WPF 普通属性变化通知

    问题描述:使用ObservableCollection<OrderItem> source 给Datagrid.ItemsSource赋值,在后台更新source集合后,前台Datagri ...

  8. 利用PowerShell复制SQLServer账户的所有权限

    问题 对于DBA或者其他运维人员来说授权一个账户的相同权限给另一个账户是一个很普通的任务.但是随着服务器.数据库.应用.使用人员地增加就变得很枯燥乏味又耗时费力的工作.那么有什么容易的办法来实现这个任 ...

  9. 用javascript写星际飞机大战游戏

    在github里看到了个不错的脚本游戏,决定亲自动手来写,效果如下 下面是代码的思路分享 把整个代码理解消化确实不容易,但是如果你坚持看完相信你一定会有收获 如果没兴趣可以直接点击下面的链接 复制代码 ...

  10. pycharm2016.3.1激活及汉化

    pycharm快捷键 PyCharm设置python新建文件指定编码为utf-8 Python | 设置PyCharm支持中文 0, 注册码 43B4A73YYJ-eyJsaWNlbnNlSWQiOi ...