JavaScript
搜索
分类

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

时间：2024-06-24 00:08:58　

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

首先是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来实现。本人觉得这样做并不理想啊。。。

求各路大神指教啊！

标签：遮罩层,浮层DIV,登录
0
投稿

猜你喜欢

  • Python socket网络编程TCP/IP服务器与客户端通信

    2023-09-13 01:46:02

  • 一个假冒的序列号被用来注册Internet Download Manager,IDM正在退出的解决办法

    2022-10-12 03:19:40

  • PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】

    2023-11-15 01:31:13

  • 在PHP中读取和写入WORD文档的代码

    2023-09-28 02:30:22

  • python实现通讯录系统

    2023-06-12 20:57:50

  • 详解python基础中的for循环

    2021-04-23 07:42:11

  • 不固定参数的存储过程实现代码

    2024-01-22 16:36:39

  • python中Flask Web 表单的使用方法介绍

    2023-08-26 15:13:24

  • js特效,页面下雪的小例子

    2024-04-22 22:32:21

  • python pycharm最新版本激活码(永久有效)附python安装教程

    2022-08-16 14:08:56

  • Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例

    2023-09-20 13:29:27

  • Python面向对象之类和对象实例详解

    2022-10-02 05:39:34

  • 用SQL语句添加删除修改字段、一些表与字段的基本操作、数据库备份等

    2024-01-26 16:53:22

  • 高效交换XML文档

    2008-01-03 14:16:00

  • Python之 requests的使用（一）

    2023-01-06 16:02:09

  • 在Python中处理日期和时间的基本知识点整理汇总

    2021-05-13 07:12:14

  • 利用Python自动监控网站并发送邮件告警的方法

    2023-12-30 03:39:41

  • JS本地刷新返回上一页代码

    2023-08-06 13:59:57

  • 复制链接到剪贴板，兼容Firefox Chrome IE

    2008-12-16 13:23:00

  • python3实现Dijkstra算法最短路径的实现

    2023-10-14 13:17:40
    • asp之家 网络编程 m.aspxhome.com