本文介绍了在前端开发中如何实现弹出框和幕布组件的效果，通过调整CSS的z-index和position实现层叠效果。同时，作者分享了在项目中使用bootstrap的datetimepicker插件的体验，以及遇到的样式冲突问题，强调了代码规范和封装的重要性。
在这周的工作和学习的过程中我做了一些有关于前端的东西，其中也取得了一些收获。
弹出框效果组件（效果图）
这个组件的原理是使用了层的概念
我认为（仅我自己认为），在css样式中的z-index决定的属性就是浏览器渲染的顺序，但是如果要达到在一个页面的表面股改另一个页面的话，我们必须要让覆盖的页面脱离文档流，这就用到了position中的absolute和fixed属性了。
下面是源代码
(html)
(css
)
这是分别设置弹出框和幕布样式的css代码,注意这里alertbox设置position为fixed,curtianweiabsolute，z-index分别为2和1，这就导致了浏览器渲染curtain先于alertbox，看起来就是弹出框在幕布上面。
(js)
这一段是根据屏幕的大小设置幕布的大小的代码
这是弹出和隐藏幕布与弹出框的代码
在实际编写项目代码的时候，我尝试着写了一个能改变适应页面大小的主页，也不是响应式页面，只是能够通过改变页面的大小来改变主页中元素的大小
主要还是通过js来实现的
缩放效果如下：
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
