关于技术您现在的位置是:首页 > 关于技术

封装一个模态弹出框

头像 2019-01-28 11:49:36 , 132 人已围观 0 条评论

简介

网页中经常遇到点一个按钮时弹出一个模态弹框,有时候不同的弹框还带有不同的运动效果,那么我们也可以自定义更优雅更舒适的风格。

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

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

弹窗的具体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~拜

 

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号