弹窗实现(自制)

自制手写弹窗

在实际开发中,我们不可避免的需要使用到弹窗,但是我们经常总是直接使用的第三方模态框,这就导致我们自己对于弹窗的理解并不深;如果有时候需要我们手写一个简单弹窗时,你可能写不出来(不要笑,大部分都是,包括有些前端也写不出来)。原因只是我们并没有深入的了解并理解了弹窗的原理。作为一名开发者,我们一定要既知其然又知其所以然,虽然我们不是专业的前端,但是我们也要向全栈方向努力嘛

直接看代码吧






    
    自写弹窗,体会原理
  
  
  



自制弹窗,理解实现原理

首页内容

用户列表:

添加用户

关闭 确定 取消
为了方便大家直接使用理解,我这里使用的脚本等都是在线链接,确保大家直接 down 下来就能运行处效果的。而那四个css就是弹窗最核心,最关键的部分。大家只要理解这两点就够了:1).弹窗之所以能起到弹窗效果,是因为它的图层(z-index) 高于 背景层,所以才能跃然背景上;2).弹窗的启用与关闭,其实就是切换弹窗体的 display 即可。额外说明:在初学时我们一定不明白或者不好想到怎么设置 .addUserBackground.addUser 这两个最关键的 class 属性,没关系,你只需要记住,并且经常使用,慢慢就理解了【有一句话说得好:当我们不理解一件事时,我们只需要去照做、背记即可,用的多了慢慢就理解了】

声明

原创手敲不易,转载请注明出处,谢谢。我是 拉丁小毛,欢迎大家关注我哦,一起交流,共同进步。有问题可以 邮我哦([email protected])

你可能感兴趣的:(css,css3,javascript,element-ui,html)