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 相关文章推荐
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
javascript给span标签赋值的方法
Nov 26 Javascript
去除html代码里面的script正则方法
May 19 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 Javascript
node.js中http模块和url模块的简单介绍
Oct 06 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 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下读取文本文件的代码
2008/07/02 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
js window.print实现打印特定控件或内容
2013/09/16 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
在vue中安装使用vux的教程详解
2018/09/16 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
跟老齐学Python之关于循环的小伎俩
2014/10/02 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
C语言如何决定使用那种整数类型
2016/11/26 面试题
中海讯通笔试题
2015/09/15 面试题
《囚绿记》教学反思
2014/03/01 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
教师对学生的评语
2014/04/28 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
公司员工体检通知
2015/04/21 职场文书
毕业赠语大全
2015/06/23 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
MySQL Server 层四个日志
2022/03/31 MySQL
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers