需求总结如果我们要写一个类似弹出框效果的组件，首先简单分析一下弹出框的几个特点：弹出框必须在当前页面的顶部，等控件在弹出框关闭、焦点等操作后才能点击。为了更好的突出弹出框的效果，我们可以在除弹出框使背景的元素变得模糊、半透明、变暗等，让用户的注意力能够完全聚焦在弹出框中。弹出前：弹出后：需求分析设置弹出框到当前页面顶部很简单，我们可以很快想到用Z-index来实现，设置Z-index取一个足够大的值（取决于你项目中Z-index值的基本设计），确保它是最大的。为了防止其他元素无法点击，我们不得不在弹出框元素上做文章，这似乎不太容易实现。实现这个功能需要结合需求总结2一起思考，既然我们不仅要让其他元素不可点击，还要让弹框的背景有幕布效果，那么我们可以另外添加一个元素到弹出框，让这个元素的长宽和窗口的大小一致（也就是覆盖整个屏幕）并且确保它的Z-index也足够大，只是小了一点比弹出窗口的Z索引。这样我们得到两个元素——一个是我们的弹框，一个是我们的幕布区域（整个屏幕除了弹框的区域），做样式的时候比较简单明了设计。代码实现思路清晰之后，剩下的就是简单的代码实现，所有的效果都很简单，只要按照我们上面分析的设计来写就OK了。HTML
