用户登录是许多网站必备的功能。有一种方式就是不管在网站的哪个页面，点击登录按钮就会弹出一个遮罩层，显示用户登录的对话框。这用方式比较灵活方便。而现在扫描二维码登录的方式也是很常见，例如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. Fis3的前端工程化之路[三大特性篇之资源定位]

    Fis3版本:v3.4.22 Fis3的三大特性 资源定位:获取任何开发中所使用资源的线上路径 内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中 依赖声明:在一个文本文 ...

  2. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. .net 分布式架构之任务调度平台

    开源地址:http://git.oschina.net/chejiangyi/Dyd.BaseService.TaskManager .net 任务调度平台 用于.net dll,exe的任务的挂载, ...

  5. 用scikit-learn学习谱聚类

    在谱聚类(spectral clustering)原理总结中,我们对谱聚类的原理做了总结.这里我们就对scikit-learn中谱聚类的使用做一个总结. 1. scikit-learn谱聚类概述 在s ...

  6. Xamarin+Prism开发详解二：Xaml文件如何简单绑定Resources资源文件内容

    我们知道在UWP里面有Resources文件xxx.resx,在Android里面有String.Xml文件等.那跨平台如何统一这些类别不一的资源文件以及Xaml设计文件如何绑定这些资源?应用支持多国 ...

  7. CRL快速开发框架系列教程十二(MongoDB支持)

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

  8. 对Thoughtworks的有趣笔试题实践

    记得2014年在网上看到Thoughtworks的一道笔试题,当时觉得挺有意思,但是没动手去写.这几天又在网上看到了,于是我抽了一点时间写了下,我把程序运行的结果跟网上的答案对了一下,应该是对的,但是 ...

  9. [WPF] Wait for a moment.

    一.控件介绍 在 WPF 中使用的等待控件,控件包括三种,普通的等待信息提示(WaitTip),进度条提示(WaitProgress),以及主程序覆盖的模拟时钟等待窗口(WaitClock),具体效果 ...

  10. Dropzone.js实现文件拖拽上传

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzo ...