用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如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. Hadoop 中利用 mapreduce 读写 mysql 数据

    Hadoop 中利用 mapreduce 读写 mysql 数据   有时候我们在项目中会遇到输入结果集很大,但是输出结果很小,比如一些 pv.uv 数据,然后为了实时查询的需求,或者一些 OLAP ...

  2. MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信

    MVVM模式解析和在WPF中的实现(五) View和ViewModel的通信 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 M ...

  3. C# 利用性能计数器监控网络状态

    本例是利用C#中的性能计数器(PerformanceCounter)监控网络的状态.并能够直观的展现出来 涉及到的知识点: PerformanceCounter,表示 Windows NT 性能计数器 ...

  4. Xamarin+Prism小试牛刀：定制跨平台Outlook邮箱应用(后续)

    在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]里面提到了Microsoft 身份认证,其实这也是一大块需要注意的地方,特作为后续补充这些知识点.上章是使用了Microsof ...

  5. CRL快速开发框架系列教程九(导入/导出数据)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  6. 通过VMware的PowerCLI配置集群内指定主机的vMotion功能

    PowerCLI是VMware开发的基于微软(MSFT)的PowerShell的命令行管理vSphere的实现,因此在批量化操作方面CLI会减轻很多GUI环境下的繁琐重复劳作. 现有场景中有大量的物理 ...

  7. FFmpeg + SoundTouch实现音频的变调变速

    本文使用FFmpeg + SoundTouch实现将音频解码后,进行变调变速处理,并将处理后的结果保存为WAV文件. 主要有以下内容: 实现一个FFmpeg的工具类,保存多媒体文件所需的解码信息 将解 ...

  8. JavaScript实现DOM对象选择器

    目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...

  9. C#关于分页显示

    ---<PS:本人菜鸟,大手子还请高台贵手> 以下是我今天在做分页时所遇到的一个分页显示问题,使用拼写SQL的方式写的,同类型可参考哦~ ------------------------- ...

  10. 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.core.NestedRuntimeException的类文件

    在学习springAOP时,出现如下异常: 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.cor ...