章节
问答
笔记
评论
占位
占位

编程挑战

运用JS技术,实现点击登录按钮后,弹出遮罩层和登录框,当点击关闭或遮罩后,让遮罩层和登录框消失。

 

 

任务

1. 获取页面的宽度和高度

注意: 兼容问题,在HTML指定了DOCTYPE,使用documentElement.body来获取有问题,要使用document.documentElement获取。

2. 创建一个遮罩层,设置ID为mask。

3. 设置遮罩层的宽度和高度,使页面被完全遮罩。

注意:如想覆盖整个页面,让遮罩层的高和宽与页面的高和度一致。

4. 在页面里插入创建的遮罩层

温馨提示:完成任务后,请验证是否与实践效果一致,如一致,恭喜您,你已经掌握此技能,否则,请修改代码,直到与结果效果一致。

5.获取页面可视区域的高度和宽度。

提示:注意scrollHeight、clientHeight、offsetHeight使用区别。

6.创建和插入的登陆框。

提示:先创建登陆框对象,在使用appendChild插入对象。

7.获取登陆框的高度和宽度。
8.设置登陆框页面垂直居中。

提示:
登陆框页面垂直居中,top值为可视区域的高/2-登陆框的高/2;
设置top值时,记住要添加px单位值。

9.调用openNew()函数,当点击按钮时,创建登录框,点击关闭时,取消登录框。

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?