关于技术您现在的位置是:首页 > 关于技术
封装一个模态弹出框
2019-01-28 11:49:36 【CSS3, Javascript】 536 人已围观 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~拜
相关推荐
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注