js实现弹出层

最近看见慕课网上的登录框,就寻思着自己做一下练练手,毕竟向我这样的初学者,放弃了动手就算是放弃了学习,我可不想!

这是原网站截下来的图:

结构分析:

点击登录应该弹出的是两层div,一个是下面的有透明覆盖层div(oCover),一个是登录框所在的div(oLogin)。


细节分析:

- 弹出覆盖层后可以使用滚轮:oCover一定是覆盖了整个页面(不只是浏览器可视区域)

- 登录层不随滚轮滑动改变位置:oLogin该是固定定位

- 不同的页面弹出的登录框相同:使用js生成DOM减少代码量

- 登录框会随着浏览器的可是窗口大小的改变而改变,所以需要监听resize事件,或者CSS设置@media

实现:


js
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容