通过遮罩层实现浮层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 相关文章推荐
EXT中xtype的含义分析
Jan 07 Javascript
风吟的小型JavaScirpt库 (FY.JS).
Mar 09 Javascript
DIV+CSS+JS不间断横向滚动实现代码
Mar 19 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
做好七件事帮你提升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
PHP二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
php获取本机真实IP地址实例代码
2016/03/31 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
JavaScript的21条基本知识点
2014/03/04 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
HEMA英国:荷兰原创设计
2018/08/28 全球购物
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
文史专业毕业生自荐信
2013/11/17 职场文书
社区安全检查制度
2014/02/03 职场文书
求职信怎么写
2014/05/23 职场文书
会计专业自荐书
2014/07/08 职场文书
班级出游活动计划书
2014/08/15 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
上课迟到检讨书
2015/05/06 职场文书
电工实训心得体会
2016/01/14 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技
box-shadow单边阴影的实现
2023/05/21 HTML / CSS