需要提要
咱们如果想写一个成果相似弹出框的组件，首先简略剖析一下弹出框的几个个性：
- 弹出框必定位于以后页面的最顶端，并且在弹出框敞开之前，其余控件都无奈点击、focus等。
- 为了更好突出弹出框的成果，除了弹出框以外的局部，咱们能够加上一个幕布（英文为backdrop）成果，让背景的元素含糊、半透明、变暗等等，让用户的注意力可能齐全集中在弹出框之中。
弹出前：
弹出后：
需要剖析
- 把弹出框设定到以后页面的最顶端很简略，咱们很快就能想到用Z-index去实现，把Z-index设定到一个足够大的值（取决于你的我的项目中Z-index数值的根本设计），确保它最大即可。
- 要让别的元素无奈点击，这个咱们在弹出框元素上做文章，如同无奈十分简便地实现。要实现这个特色，咱们须要和需要提要2一起思考。
- 既然咱们不仅要让别的元素无奈点击，还要让弹出框的背景有幕布成果，那咱们能够除了弹出框以外，再加一个元素，让这个元素的长、宽和视窗大小统一（即盖住整个屏幕）并且确保它的Z-index也足够大，然而又刚好比弹出框的Z-index小一点。这样咱们就失去了两个元素——一个是咱们的弹出框，另一个是咱们的幕布区域（整个屏幕除了弹出框的区域），这样在做款式设计的时候也比拟简单明了。
代码实现
思路清晰之后，剩下的就是简略的代码实现了，所有成果都很简略，只有依据咱们下面剖析的设计来写就OK了。
HTML
<main> <div class="modal"><button id="close">close</button></div> <div class="backdrop"></div> <button class="backcontent">show</button></main>JS
var 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外面的设定，大家能够略微认真看一下。
CSS
body { 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次要是管制被元素覆盖住的元素的成果，留神，要看到这个款式带来的成果，笼罩的元素必须有肯定的半透明度（这样能力看到上面一层的成果）。
供参考：
- 无关
backdrop-filter的MDN文档 - Codepen上这个Demo的代码与成果