通过遮罩层实现浮层DIV登录的js代码


Posted in Javascript onFebruary 07, 2014

这个就没什么好说的了。。直接上代码啊!!

首先是HTML的代码。其中包含了登录点击按钮以及一个简陋的登录框。

<body> 
<div id="shade"></div> 
<div> 
<a onclick="login()" style="cursor:pointer">登录</a> 
</div> 
<br/> 
什么都没有用。。。<br/><br/> 
什么都没有用。。。<br/><br/> 
什么都没有用。。。<br/><br/> 
什么都没有用。。。<br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <div id="login" style="display: none; z-index:1025; position:absolute;"> 
<form method="post" action="user/login.html"> 
<table width="200"> 
<caption> 
用户登录 
</caption> 
<tr> 
<td>用户名:</td> 
<td><input type="text" name="userName" /></td> 
</tr> 
<tr> 
<td>密码:</td> 
<td><input type="password" name="password" /></td> 
</tr> 
<tr> 
<td>验证码:</td> 
<td><img alt="" src="base/verify.html" onClick=""></td> 
</tr> 
<tr> 
<td><input type="submit" value="登录" /></td> 
<td><input type="button" value="取消" onClick="cancel()" /></td> 
</tr> 
</table> 
</form> 
</div> 
</body>

接着是JS脚本代码的实现
<script type="text/javascript"> 
function login(){ 
var shadeWidth = document.body.clientWidth + 30; 
var shadeHeight = document.body.clientHeight + 30; 
var shade = document.getElementById("shade"); 
shade.style.width = shadeWidth + "px"; 
shade.style.height = shadeHeight + "px"; 
shade.style.display = "block"; var loginDivWidth = 200; 
var loginDivHeight = 800; 
var loginDiv = document.getElementById("login"); 
loginDiv.style.width = loginDivWidth + "px"; 
loginDiv.style.height = loginDivHeight + "px"; 
loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 
- loginDivHeight / 2) + "px"; 
loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 
- loginDivWidth / 2) + "px"; 
loginDiv.style.display = "block"; 
} 
</script>

这里只有显示遮罩层以及登录框的代码。至于隐藏的代码也很简单,就是将遮罩层(shade)的DIV块以及登录框(login)的DIV块的display属性都设置成none应该就没有什么问题了。。

至此,一个简单的通过遮罩层实现浮层DIV登录的功能就实现了。关于美工方面的工作就由大家自行解决了。

在这里,有一个功能求助大家啊。。就是如何让弹出的登录框的DIV块跟随滚动条移动呢??

我的实验代码如下。

function loginDivCenter (){ 
loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 
- loginDivHeight / 2) + "px"; 
loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 
- loginDivWidth / 2) + "px"; 
} function scall (){ 
loginDivCenter(); 
} 
window.onscroll=scall; 
window.onresize=scall; 
window.onload=scall;

但是很不幸的是本人失败了。。网上找了很多,但都不是符合要求的。大多是设置一个setInterval来实现。本人觉得这样做并不理想啊。。。

求各路大神指教啊!

Javascript 相关文章推荐
javascript数组输出的两种方式
Jan 13 Javascript
关于延迟加载JavaScript
May 05 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
详解vue axios用post提交的数据格式
Aug 07 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
做好七件事帮你提升jQuery的性能
Feb 06 #Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 #Javascript
javascript简单性能问题及学习笔记
Feb 04 #Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 #Javascript
21个值得收藏的Javascript技巧
Feb 04 #Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 #Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 #Javascript
You might like
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
JavaScript 特殊字符
2007/04/05 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
python读取各种文件数据方法解析
2018/12/29 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
将pycharm配置为matlab或者spyder的用法说明
2020/06/08 Python
python实现取余操作的简单实例
2020/08/16 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
优秀党支部事迹材料
2014/01/14 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
家长意见书
2015/06/04 职场文书