CSS简单实现弹出框、输入框等的背景幕布（半透明、变暗、变模糊）效果，模仿苹果官网导航块的半透明效果。

效果，模仿苹果官网导航块的半透明效果。"/>

CSS简单实现弹出框、输入框等的背景幕布（半透明、变暗、变模糊）效果，模仿苹果官网导航块的半透明效果。

需求提要

我们如果想写一个效果类似弹出框的组件，首先简单分析一下弹出框的几个特性：

1. 弹出框肯定位于当前页面的最顶端，并且在弹出框关闭之前，其他控件都无法点击、focus等。
2. 为了更好突出弹出框的效果，除了弹出框以外的部分，我们可以加上一个幕布（英文为backdrop）效果，让背景的元素模糊、半透明、变暗等等，让用户的注意力能够完全集中在弹出框之中。

弹出前：

弹出后：

需求分析

1. 把弹出框设定到当前页面的最顶端很简单，我们很快就能想到用Z-index去实现，把Z-index设定到一个足够大的值（取决于你的项目中Z-index数值的基本设计），确保它最大即可。
2. 要让别的元素无法点击，这个我们在弹出框元素上做文章，好像无法非常简便地实现。要实现这个特征，我们需要和需求提要2一起思考。
3. 既然我们不仅要让别的元素无法点击，还要让弹出框的背景有幕布效果，那我们可以除了弹出框以外，再加一个元素，让这个元素的长、宽和视窗大小一致（即盖住整个屏幕）并且确保它的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