前端如何创建好看的简洁的蒙版弹窗

平时我们创建弹窗蒙版时，都是给创建一个div，然后给div添加透明背景色，相信大多数人都是这样写的， 包括我以前也是这样创建蒙版弹窗的。

下面给大家一个介绍一个新的方法

<div id="app">
        这里是页面主题内容
</div>

<div>
       这里是弹窗内容 //这里不需要创建蒙版
<div>

当前弹窗显示是

我们在 app 里修改样式

<div id="app" style="filter: blur(3px);">
        这里是页面主题内容
</div>

<div>
       这里是弹窗内容 //这里不需要创建蒙版
<div>

其实就是添加了   filter: blur(3px); 页面就会出现模糊蒙版 ，  当px像素越大，页面越模糊

效果如下 ，非常实用，