CSS（十）——定位练习（弹出层）
文章目录
概述
一般来说，弹出层可应用于很多地方，一些需要页面跳转或者二级菜单不能满足需求以及页面美化等方面都可以使用弹出层来实现。本篇笔记主要记录一个弹出层及其简单的案例，与二级菜单的笔记一样，文中只做页面展示，不涉及动态页面。
弹出层
首先放一个页面的展示图。如图1-1所示：
图 1-1 弹出层页面展示图
在对页面中的元素样式分析可以得出，我们需要一个类似于二级菜单的元素及相关样式
首先做一个页面
<style>
.main{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(255,255,255,.5);
}
</style>
<body>
<div class="main">
</div>
</body>
-
设定这个元素为一个固定定位，因为在页面出现弹出层的时候，除了弹出层以外的页面都被做成了半透明的样式。
-
宽高设定为整个视窗的大小，所以全部都为100%；
-
【补充知识】：透明通道
rgba（红，绿，蓝，alpha）——alpha取值范围在0~1之间，0为透明，1位不透明。
hex：#红绿蓝 透明
-
这个时候页面会被我们设定的半透明色遮住。
现在做一个弹出层的元素：弹出层要在设置了视窗半透明的div元素内部
<div class=“container”>
啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
弹出层的元素设定好后，我们来设定该元素的样式
width: 404px;
height: 502px;
background-color: #fff;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
box-sizing: border-box;
padding: 1em;
border-radius: 10%;
该元素的样式具体解释如下：
- 首先，他要相对于父元素定位（依旧可以理解为他和父元素设定的视窗绑定，至于为什么直接与视窗绑定，总结里会有解释）
- 设定定位属性后，将他四周与父元素的位置固定，即：left，right等，然后设定margin为auto（margin会自动吸收剩余部分）。
- 其余的样式可以自己看心情，怎么好看怎么弄。
总结
本篇论文中记录了弹出层的具体做法，**但是，没有如何触发弹出层和隐藏弹出层，这种操作一般我们用JavaScript来做，再次不做赘述，如果想做的同学可以使用JavaScript中的onclick函数来执行一下。**下面记录一下弹出层的核心逻辑。
- 首先在页面中单独添加一个元素（也可以像二级菜单一样设定一个内部的隐藏元素，不过可能会使得每一个弹出层样式代码冗余。）
- 设定弹出层样式中的定位为固定定位（为整个视窗做半透明，同时提供一个做绝对定位的参考。）
- 弹出层样式中可以依旧可以按照自己的心情来装饰。
具体逻辑就是这些，总体来说比较简单。按照本文的思路可以制作出一个弹出层已经弹出的样式。至于隐藏和触发等操作需要JavaScript来制作，这段时间比较懒，不想做！
1416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
