jQuery实现遮罩层登录对话框


Posted in Javascript onDecember 29, 2016

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

结尾附有源码下载。

效果图:

jQuery实现遮罩层登录对话框

代码如下:

<!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="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://xiazai.3water.com/201612/yuanma/hovertreejquery91_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
Mar 02 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
微信小程序实现底部导航
Nov 05 Javascript
js实现打字小游戏
Dec 17 Javascript
DWR内存兼容及无法调用问题解决方案
Oct 16 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
JS实现的简易拖放效果示例
Dec 29 #Javascript
使用DeviceOne实现微信小程序功能
Dec 29 #Javascript
Angularjs 动态改变title标题(兼容ios)
Dec 29 #Javascript
浅谈js算法和流程控制
Dec 29 #Javascript
canvas学习之API整理笔记(二)
Dec 29 #Javascript
Node.js复制文件的方法示例
Dec 29 #Javascript
详解微信小程序——自定义圆形进度条
Dec 29 #Javascript
You might like
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python实现截屏的函数
2015/07/25 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
python装饰器实例大详解
2017/10/25 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
蓬莱阁导游词
2015/02/04 职场文书
综合实践活动报告
2015/02/05 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015员工年度考核评语
2015/03/25 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis