CSS Overlay技巧

发表于 | 分类于

引子

　　对于模态框，一般都不陌生，在面试中，总会被问到有没有自己写过控件，那么模态框的实现原理是什么呢？模态框的一个特点就是在弹出框时，用户不能编辑除了模态框以外的区域。今天主要列举使用CSS实现遮罩层的方式，比较优劣，最后总结最优的一种方式（并非绝对最优，仅供参考）。

1528215690199

bootstrap的模态框

正文

1.使用“子绝父相”进行定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
    <style>
        html,
        body {
            min-height: 100%;
        }
        body {
            position: relative;margin: 0px;
            background: #ddd;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            opacity:1;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度</a>
    <div class="overlay"></div>
</body>
<html>

1528216778635

.overlay为一层透明的遮罩层，这个时候用户点击百度是没有反应的，模态框的信息可以显示在overlay的遮罩层中，且z-index高于overlay

但是overlay必须是body的子元素，秉承“子绝父相”的原则。

2.Fixed定位解决问题

1
2
3
4
5
6
7
8
9
.overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 10;
    opacity:1;
}

效果由于第1种方法，Bootstrap的modal就是使用的此方法，如下图所示：

1528217329330

在大漠的文章中还提及了outline和box-shadow，但是经过试验发现不能达到模态框的要求。

所以使用第二种的方式来制作遮罩层，比较适合。

参考文献：

  1. http://www.w3cplus.com/css/css-overlay-techniques.html

#