需求提要

我们如果想写一个效果类似弹出框的组件，首先简单分析一下弹出框的几个特性：弹出框肯定位于当前页面的最顶端，并且在弹出框关闭之前，其他控件都无法点击、focus等。

为了更好突出弹出框的效果，除了弹出框以外的部分，我们可以加上一个幕布(英文为backdrop)效果，让背景的元素模糊、半透明、变暗等等，让用户的注意力能够完全集中在弹出框之中。

弹出前：

弹出后：

需求分析把弹出框设定到当前页面的最顶端很简单，我们很快就能想到用Z-index去实现，把Z-index设定到一个足够大的值(取决于你的项目中Z-index数值的基本设计)，确保它最大即可。

要让别的元素无法点击，这个我们在弹出框元素上做文章，好像无法非常简便地实现。要实现这个特征，我们需要和需求提要2一起思考。

既然我们不仅要让别的元素无法点击，还要让弹出框的背景有幕布效果，那我们可以除了弹出框以外，再加一个元素，让这个元素的长、宽和视窗大小一致(即盖住整个屏幕)并且确保它的Z-index也足够大，但是又刚好比弹出框的Z-index小一点。这样我们就得到了两个元素——一个是我们的弹出框，另一个是我们的幕布区域(整个屏幕除了弹出框的区域)，这样在做样式设计的时候也比较简单明了。

代码实现

思路清晰之后，剩下的就是简单的代码实现了，所有效果都很简单，只要根据我们上面分析的设计来写就OK了。

HTML

show

JSvar button = document.getElementsByTagName("button")[0];

button.addEventListener("click", function() {

// show the modal

var ele = document.getElementsByClassName("modal")[0];

ele.style.visibility = `visible`;

ele.style.opacity = `1`;

// show backdrop effect

var backdrop = document.getElementsByClassName("backdrop")[0];

backdrop.style.opacity=`1`;

backdrop.style.visibility=`visible`;

})

var close = document.getElementById('close').addEventListener("click", function(event) {

// close modal

event.target.parentNode.style.visibility=`hidden`;

event.target.parentNode.style.opacity = `0`;

// close backdrop effect

var backdrop = document.getElementsByClassName("backdrop")[0];

backdrop.style.opacity=`0`;

backdrop.style.visibility=`hidden`;

})

我们的幕布效果最重要的是在CSS里面的设定，大家可以稍微仔细看一下。

CSSbody {

background-color: #f4ebc1;

}

main {

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

.backdrop{

width:100%;

height:100%;

visibility: hidden;

opacity: 0;

position:fixed;

top:0;

right:0;

bottom:0;

left:0;

background: rgba(8, 7, 7, 0.6);

z-index: 100;

transition: all .2s ease;

backdrop-filter: saturate(180%) blur(1px);

}

.backcontent{

position: absolute;

top: 70vh;

width: 80px;

height: 30px;

background: white;

text-align: center;

line-height: 28px;

border: 1px solid black;

box-shadow: 0 0 3px #0070D2;

border-radius: 30px;

opacity:.85;

outline: none;

}

.modal {

position: absolute;

left: 50xw;

top: 30vh;

width: 300px;

height: 150px;

visibility: hidden;

opacity: 0;

background-color: white;

border-radius: 5px;

border: 1px solid black;

transition: all .2s ease;

display: flex;

justify-content: center;

align-items: flex-end;

z-index: 9001;

}

#close {

width: 80px;

height: 30px;

background: white;

text-align: center;

line-height: 28px;

border: 1px solid black;

box-shadow: 0 0 3px #0070D2;

border-radius: 30px;

opacity:.85;

outline: none;

margin-bottom: 1rem;

}

苹果官网导航栏效果

苹果官网的导航栏的半透明效果，主要是由下面这行样式实现的。backdrop-filter: saturate(180%) blur(1px);

例图：注意导航栏的半透明、模糊效果

backdrop-filter主要是控制被元素覆盖住的元素的效果，注意，要看到这个样式带来的效果，覆盖的元素必须有一定的半透明度(这样才能看到下面一层的效果)。

供参考：