首页 web前端 js教程 通过遮罩层实现浮层DIV登录的js代码_javascript技巧

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

May 16, 2016 pm 05:01 PM
登录 遮罩层

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

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

复制代码 代码如下:






什么都没有用。。。


什么都没有用。。。


什么都没有用。。。


什么都没有用。。。




























































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

求各路大神指教啊!
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

wallpaperengine登录别的号后下载别人的壁纸怎么办 wallpaperengine登录别的号后下载别人的壁纸怎么办 Mar 19, 2024 pm 02:00 PM

当你在自己电脑上登过别人steam账号之后,恰巧这个别人的账号也有wallpaper软件,切换回自己账号之后steam就会自动下载别人账号订阅的壁纸,用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号,在设置里面找到云同步,关闭steam云同步。2、登陆你之前登陆的别人的steam账号,打开wallpaper创意工坊,找到订阅内容,然后取消全部订阅。(以后防止找不到壁纸,可以先收藏再取消订阅)3、切换回自己的stea

小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? 小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? Mar 21, 2024 pm 09:41 PM

随着社交媒体的迅速发展,小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中,有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题,以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号?1.找回密码登录如果长时间未登录小红书,可能导致账号被系统回收。为了恢复访问权限,你可以尝试通过找回密码的方式重新登录账号。操作步骤如下:(1)打开小红书App或官网,点击“登录”按钮。(2)选择“找回密码”。(3)输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘 Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘,需要具体代码示例随着互联网的快速发展,网站建设变得越来越普遍,而Discuz作为一款常用的论坛建站系统,受到了许多站长的青睐。然而,正是因为其功能强大,有时候我们在使用Discuz的过程中会遇到一些问题,比如后台登录问题。今天,我们就来大揭秘Discuz后台登录问题的解决方法,并且提供具体的代码示例,希望能帮助到有需要

《阴阳师》茨木童子典藏皮肤登录即领,禅心云外镜新皮肤即将上线! 《阴阳师》茨木童子典藏皮肤登录即领,禅心云外镜新皮肤即将上线! Jan 05, 2024 am 10:42 AM

山野间万鬼嘶鸣,隐没兵刃交接之声,越岭奔赴而来的鬼将,心中战意汹涌,以炎火为号,率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃,鎏金眼眸迸发桀骜战意,白玉甲片装点战袍,彰显大妖不羁狂放的气势。雪白飘扬的袖摆上,赤焰攀附交织,金纹烙印其中,燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至,烈焰令群峦为之震动,炼狱间归来的妖鬼啊,一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店,

快手电脑版怎么登录-快手电脑版的登录方法 快手电脑版怎么登录-快手电脑版的登录方法 Mar 04, 2024 pm 03:30 PM

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法,有需要的小伙伴可以来了解了解哦。第一步:首先在电脑的浏览器上百度搜索快手官网。第二步:在搜索结果列表里面选取第一条。第三步:进入到快手官网主页面后,点击视频的选项。第四步:点击右上角的用户头像。第五步:在弹出的登录菜单里面点击二维码登录。第六步:之后打开手机上的快手,点击左上角的图标。第七步:点击二维码标志。第八步:在我的二维码界面点击右上角的扫描图标之后,扫描电脑上的二维码即可。第九步:最后电脑版的快手就登录成

夸克怎么登录两个设备 夸克怎么登录两个设备 Feb 23, 2024 pm 10:55 PM

夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的,但是多数的小伙伴不知道夸克浏览器如何登陆两个设备,接下来就是小编为用户带来的夸克登陆两个设备方法图文教程,感兴趣的用户快来一起看看吧!夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP,主页面点击【夸克网盘】;2、接着进入到夸克网盘界面,选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。

尝试这个简单的 3 步解决方案,解决无法登录Microsoft帐户的问题 尝试这个简单的 3 步解决方案,解决无法登录Microsoft帐户的问题 Sep 07, 2023 am 10:09 AM

您无法登录Microsoft帐户的原因有多种。虽然它很少发生,但当它发生时,它可能会令人沮丧。例如,在Windows11中,发生这种情况的原因之一是由于MicrosoftStore内置应用程序有时会损坏并停止正常工作。例如,这位Reddit用户遇到了这个问题,其他用户通过一个简单的解决方案来拯救,该解决方案似乎最终奏效了。为了能够重新登录Microsoft帐户,需要重新安装所有内置的Microsoft应用商店应用。事情是这样的。以管理员身份打开Powershell应用。输入以下命令:Get-Ap

小红书只记得账号怎么登录?只记得账号怎么找回? 小红书只记得账号怎么登录?只记得账号怎么找回? Mar 23, 2024 pm 05:31 PM

小红书如今已经融入了许多人的日常生活,其丰富的内容和便捷的操作方式让用户乐此不疲。有时候,我们可能会忘记账号密码,只记得账号而无法登录确实让人感到困扰。一、小红书只记得账号怎么登录?当忘记密码时,我们可以通过手机验证码的方式登录小红书。具体操作如下:1.打开小红书App或网页版小红书;2.点击“登录”按钮,选择“账号密码登录”;3.点击“忘记密码?”按钮;4.输入你的账号,点击“下一步”;5.系统会发送验证码到你的手机,输入验证码后点击“确定”;6.设置新的密码并确认。你还可以通过第三方账号(如

See all articles