angularjs自定义创建弹出框

最近写了一个弹出框的功能，期间主要遇到的问题是<ui-view>的使用，和css的定位，还有设置背景的透明，及解决背景透明的异常。
在这里记录一下自己的问题解决的步骤。

先看一下实现的效果

3.gif

<ui-view>的使用

在这里我们实现的功能是点击一个按钮，实现弹出框的功能。
方法是用<ui-view>包住触发按钮，然会将按钮触发的下一个路由的界面替换按钮实现弹出框效果。

下面给出示例代码

1
2
3
4
5
<ui-view>
    <a class="btn btn-xs btn-outline btn-info" ui-sref="personnel.personnelQualificationManage.viewTrainingRecord({data: object.trainingRecords})">
     <i class="pe-7s-look"></i>&nbsp;查看
    </a>
</ui-view>

css的定位

在这里介绍css的三种定位方式：relative，absolute，fixed

relative：相对于一个元素的正常位置来对其定位

absolute：元素框从文档流完全删除，并相对于其包含块定位。

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

在这里主要介绍一下absolute与fixed的区别：

1、没有滚动条的情况下没有差异

2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动

可以这么理解，fixed：固定在当前window不动， absolute：会随参照对象元素的高度和宽度变化而变化

一般fixed用在遮盖层和固定在页面某个位置，如固定在顶端的菜单栏，又如弹出提示框居中显示

下面给一下示例代码看一下区别：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 弹出框的效果,定位相对于浏览器窗口左280px; 上100px;
.yunzhiModel {
    position:fixed;
    left:280px; 
    top:100px;  
    width: 800px; 
    background-color:#eee;
    z-index: 10;
}
// 背景的效果， 定位距离窗口上距离0px，左距离0px
.yunzhiModelBack {
    z-index: 5; 
    position:fixed; 
    background:#000; 
    background: rgba(0, 0, 0, 0.4); 
    top:0px; 
    left: 0px; 
    height: 100%; 
    width: 100%;
 }

设置背景的透明度

目的：实现一个黑背景，并在背景上添加我们的显示弹窗。

实现方法:利用z-index设置两个分层，下面的分层实现黑色透明背景。上面分层显示弹窗。

设置透明度有两种方法：
1.opacity 属性
使用方法：opacity：0.5；显示0.5的透明度 他的值可以为0-1
子元素会继承父元素的透明效果。
2.RGBA(R,G,B,A)
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
使用方法：background: rgba(0,0,0,0.5)；显示0.5的透明度

子元素不继承父元素的透明效果。

z-index的分层

刚开始的时候我并没为有通过z-index分层，遇到了有些背景之后的内容透过背景的效果，这个问题是通过z-index设置分层来解决的。

原因是当你不使用分层时，你的所有的fixed和absolute都在一个层上面，会产生我们的黑色背景无法将内容全部遮盖的效果。

推荐文章