为了账号安全,请及时绑定邮箱和手机立即绑定

弹出层效果

难度初级
时长25分
学习人数
综合评分9.60
176人评价 查看评价
9.8 内容实用
9.6 简洁易懂
9.4 逻辑清晰
为什么要用js生成而不是直接写呢?
是这效果吗?http://www.thdni.com/hy/tj.php?hy=2009
必须得加事件冒泡,不然点击登录框登录框也会消失
搞的太复杂了吧 直接给遮罩层设定position: fixed 然后登录框自动居中
这个是视频得开一倍速。。。
我的界面宽度是22哈哈?
学习了,有用视频
感谢提醒事件冒泡的同学~
oBtn.onclick=function(event)
{
var event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
openNew(); //执行openNew函数
}
这是代码,DOM事件探秘里面有讲~可以去看看
看到有同学说不知道为什么close获取不了,刚开始我也是。试了好久没发现问题,也是跟着做的,后面下载源代码比较才发现。是因为body体里面本身的id名为login和mask的没有删除,老师开始写代码为了方便我们理解,在body体写的,后来在js里重新create以后就应该删除body体里的,不然就重复了,相当于body本身有,另外又create了一个插入到body,也就是两个,在js里面那个是节点就能删除,在body体里的根本删不了,也就是我们看到的怎么close关不掉。不知道描述对不对,我是这么理解的
documentElement 属性可返回文档的根节点。
老师 给你们录视频 还这么多事,声音大不知道放小点?
视频开头声音太大,太突兀 耳朵难受
明显有不足之处,如果在创建之后窗口大小变化,明显弹出层的位置就不会在中间,需要绑定一个resize事件重新计算遮罩层大小和登录框位置。最好利用函数节流的思想,避免resize在短时间内重复执行函数过多次。
var sHeight = document.body.scrollHeight;
var wHeight = document.documentElement.clientHeight;
document.body.appendChild(oLogin);
var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;
oLogin.style.top = wHeight/2 - dHeight/2 + "px";
openNew();
#mask{
position:fixed;
top:0;
left:0;
right:0;
botton:0;
}
课程须知
1.您至少具备HTML+CSS样式基础知识;2.您至少具备JavaScript基础知识。
老师告诉你能学到什么?
1.学会DOM操作创建、插入和删除结点元素。2.学会position、fixed属性固定元素位置3.学会使用z-index改变元素的层级

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消