网页中经常遇到点一个按钮时弹出一个模态弹框，有时候不同的弹框还带有不同的运动效果，那么我们也可以自定义更优雅更舒适的风格。如何实现呢？今天就分享一下。

先看一下其中一种效果吧：

弹窗的具体Css样式自己去设计，比如说给弹框加上圆角啊，设置一个好看的背景色啊等等，这里不多说。

上边这种是从上到下淡入淡出的效果，当然我们还有其他效果可以选择，狠狠点击这里去试试吧！

我们封装一个通用模态弹窗函数openNew()下载入口（如无法下载，可在新标签页打开，然后右键另存为即可），哪里需要哪里调用即可。具体调用如下，调用时有几个参数需要设置：

openNew({
  title: '标题',
  content: '这里是弹窗内容',
  cancel: false,
  cancelText: '取消',
  okText:'确定' ,
  move_in: 'fadeInDown',
  move_out: 'fadeOutDown',
  ok_fn: function(){
    alert('这里是回调函数');
  }
})

参数介绍：

title-字符串，定义弹窗的标题；

content-字符串，定义弹窗的内容；

cancel-布尔值，定义是否显示取消按钮，ture为显示，false为不显示；

cancelText-字符串，定义取消按钮的文本；

okText-字符串，定义确定按钮的文本；

move_in-字符串，定义弹窗进入时的运动类型；

move_out-字符串，定义弹窗退出时的运动类型；

ok_fn-函数，点击确定按钮后的回调，没有回调的话可以不写此参数；

这些参数只是用来创建一个弹窗的结构，那么具体运动形式离不开我们强大的CSS3运动类库，纯CSS实现各种不同运动动画，大概有70多种运动形式，想用哪一个找到对应的类名即可。有需要的可以点击这里下载（如无法下载，可在新标签页打开，然后右键另存为即可）。

当然，模态弹框千千万，相信大家还有更多更好的效果，我们，加油！

Over~拜