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 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
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
请离开include_once和require_once
2013/07/18 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
BootStrap的table表头固定tbody滚动的实例代码
2016/08/24 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
vue.js的提示组件
2017/03/02 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python学习必备知识汇总
2017/09/08 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python可视化text()函数使用详解
2020/02/11 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
汽车专业毕业生推荐信
2013/11/12 职场文书
店长助理岗位职责
2013/12/13 职场文书
校长先进事迹材料
2014/02/01 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
危货运输企业安全生产责任书
2014/07/28 职场文书
万能检讨书
2015/01/27 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2015中秋祝酒词
2015/08/12 职场文书