js实现类bootstrap模态框动画

在pc端开发，模态框是一个很常用的插件，之前一直用的第三方插件，比如bootstrap，jQuery的模态框插件，最近还用了elementUI的。但是会发现其实动画效果都差不多，那么如何去实现这样一个动画效果呢？ 模态框的构成  常见的模态框的结构我们很容易就可以看出，一个遮罩层，还有内容区。内容区主要是头部（包括标题，关闭按钮）和body部分（body中常常会有确认和取消按钮）。 布局  1.背景要充满全屏，而且如果页面有滚动，当模态框弹出的时候是无法滚动的；  2.内容区要水平居中显示，至于垂直方向看设计喽；  3.模态框出现是渐渐显示出来，而且从顶部滑下； 实现  遮罩使用最外层元素占满