讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

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

php中文网
发布： 2016-05-16 17:01:20
原创
1235人浏览过

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

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

Designify
Designify

拖入图片便可自动去除背景✨

Designify 90
查看详情 Designify
复制代码 代码如下:






什么都没有用。。。


什么都没有用。。。


什么都没有用。。。


什么都没有用。。。




























































接着是JS脚本代码的实现
复制代码 代码如下:



这里只有显示遮罩层以及登录框的代码。至于隐藏的代码也很简单，就是将遮罩层(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来实现。本人觉得这样做并不理想啊。。。

求各路大神指教啊！

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js数字转换为float,取N位小数_javascript技巧 下一篇：做好七件事帮你提升jQuery的性能_jquery
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
为什么javascript需要对象密封_它限制哪些操作？ 对象密封限制新增属性、删除属性和重新配置属性，但允许修改已有可写属性的值；它比不可扩展多禁删除，比冻结少禁改值，适用于结构稳定而内容需可变的场景。
2025-12-21 16:11:02
292
javascript动画如何实现_怎样用requestAnimationFrame创建流畅动画？ rAF比定时器更适合动画，因其与屏幕刷新率同步、自动暂停、无需手动计算帧间隔；基础用法需递归调用，推荐使用时间戳控制进度；注意取消动画、避免强制重排、优先使用transform/opacity，并可添加polyfill兼容旧浏览器。
2025-12-21 16:06:39
489
javascript原型是什么_原型链如何工作？ JavaScript原型是对象共享属性和方法的机制，原型链通过[[Prototype]]逐级向上查找属性直至null；prototype是函数独有的属性，用于指定实例继承的内容，而__proto__是实例指向其构造函数prototype的内部链接。
2025-12-21 16:05:45
427
如何用javascript实现懒加载_有哪些技术方案？ 懒加载核心是按需加载，推荐使用IntersectionObserverAPI实现，辅以loading="lazy"渐进增强；老项目兼容IE可降级为节流滚动监听；框架中宜封装为Hook或指令，避免关键内容懒加载。
2025-12-21 15:59:47
590
javascript如何实现算法_如何用js解决常见的算法问题 JavaScript算法核心是理解本质、选合适数据结构、写可读可维护代码，强调灵活性与工程实用性，而非极致性能。
2025-12-21 15:59:02
495
Javascript如何实现函数组合_如何构建管道数据流？ 函数组合（compose）从右到左执行，如f(g(h(x)))；管道（pipe）从左到右执行，更符合阅读顺序；二者均通过reduce或reduceRight实现，依赖纯函数与一元化设计以保障可靠性。
2025-12-21 15:50:48
648
javascript高阶函数是什么_map和filter如何使用 JavaScript高阶函数是以函数为参数或返回函数的函数；map对每个元素做一对一转换生成等长新数组，filter按条件筛选生成子集数组，二者可链式组合实现清晰的数据处理逻辑。
2025-12-21 15:43:23
215
javascript怎样操作日期和时间？_javascript的Date对象有哪些方法？ JavaScriptDate对象可处理当前时间及任意时间点，支持创建、获取、设置、格式化等操作；需注意月份从0开始、时区影响及字符串解析兼容性。
2025-12-21 15:39:07
600
什么是箭头函数_它与普通函数有何不同 箭头函数是ES6引入的语法糖，语法更简洁但无this绑定、不能new调用、无arguments和prototype，且无法直接递归。
2025-12-21 15:39:07
611
javascript的数组去重有哪些方法_如何兼顾性能和可读性 JavaScript数组去重首选[...newSet(arr)]，简洁高效且语义清晰；大数组或旧环境用Map手动遍历实现O(n)性能；对象数组需自定义key比较逻辑；封装成uniqBy等函数可提升复用性与可读性。
2025-12-21 15:36:09
510
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部