模态框实现
想要实现个模态框的效果，背景有一层蒙版，第一个想法就是设置背景淡灰色并给个透明度，so easy!
background-color: rgba(0,0,0);
opacity: 0.55;
下面图片可以看到，模态框内部的文字也继承了 opacity 的透明度属性，即便给内部子元素设置个 opacity=1 也没有什么卵用。
opacity 实现的透明度会强行传给子元素
除了 opacity 之外，还有一种设置透明度的方法是 background-color: rgba(0,0,0,0.55) ，注意是 rgba 不是 rgb，前者最后那个字母 a 也是设置透明度的，这种方法就不会将透明属性传给子元素了，效果如下。
rbga() 实现的透明度不会继承给子元素
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模态框-练习</title>
<style>
body {
color: #333;
}
.modal {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background-color: rgba(0,0,0, 0.55);
}
.modal-dialog {
position: relative;
margin: 100px auto;
max-width: 500px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 6px;
box-shadow: 0 3px 9px rgba(0,0,0,.5);
background: #fff;
}
</style>
</head>
<body>
<h1>hello world!</h1>
<div class="modal">
<div class="modal-dialog">
<h1>模态框内部</h1>
</div>
</div>
</body>
</html>
到这里为止效果是弄出来了，又想着去参考 Bootstrap 和 Antd 的代码，看看它们的模态框怎么整的？发现这两货都是整了个空 div(.madal-mask) 来设置背景蒙版，另一个兄弟元素 div(/modal-dialog) 作为模态框的内容。为什么这样写？猜测是为了避免透明度继承的问题，但是一看 modal-mask 代码透明度是用 rgba 属性设置的，压根不存在透明度继承的问题，那么这种写法的意义又何在？？
<div>
<div class="modal-mask"/> <!-- 设置背景蒙版，透明度 -->
<div class="modal-dialog"> <!-- 模态框内容 -->
</div>
</div>
网友评论