data-open
方式打开对应的视图层,可以为id或class,注意前缀符号#和.语法:ice.popup(Json)
Popup参数(Json)
参数 | 类型 | 默认 | 必填 | 描述 |
---|---|---|---|---|
title | String bool | - | 否 | 标题,false为隐藏标题栏 |
content | String | - | 是 | 内容,当设置url字段时,为非必传 |
width | String | 400px | 否 | 宽度设置 |
height | String | 270px | 否 | 高度设置 |
url | String | - | 否 | iframe的方式加载,url为网址或页面路径,该页面会新增一个_popup变量,包含当前弹窗的对象,可用_popup.close()来关闭当前弹窗。 |
data | Object | - | 否 | 当设置url字段时有效,用于给iframe中的页面传递参数,获取数据使用_popup.data |
animate | String | ani-up-in | 否 | 弹出的动画特效:
ani-in:淡入
ani-up-in:向下下滑淡入
ani-down-in:向上滑淡入
ani-left-in:向右滑淡入
ani-right-in:向左滑淡入
|
position | String | - | 否 | 弹出位置:
t:顶部居中对齐
b:底部居中对齐
l:左边垂直对齐
r:右边垂直对齐
lt:左上角垂直对齐
lb:左下角垂直对齐
rt:右上角垂直对齐
rb:右下角垂直对齐
|
color | String | white | 否 | 支持 主题颜色 |
background | String | false | 否 | 是否显示背景 |
time | int | - | 否 | 设置多久自动关闭,单位毫秒(1s=1000ms),默认不自动关闭弹窗 |
btn | array false | ['取消', '确认'] | 否 | 按钮设置,如果为false,不显示按钮,如果为数组,第一个为确认,第二个为取消 |
yes | function | - | 否 | 确认按钮的回调函数 |
no | function | - | 否 | 取消按钮和关闭回调函数 |
success | function | - | 否 | 弹窗打开后的回调函数 |
disable | array | - | 否 | 用于禁用取消和确定按钮点击后自动关闭页面,可以在yes或no回调中使用e.close()手动关闭,该功能主要用于弹窗内的表单处理结果返回来以后需要通过程序来判断是否关闭当前弹窗。 |
footer | string | - | 否 | 弹窗footer底部左下角内容 |
让我们来看一个简单的示例
如何在弹窗中自定义一个关闭弹窗的按钮,看示例。
语法:ice.prompt(Json|String)
prompt参数(String),等同传递Json参数{content:String}
prompt参数(Json)
参数 | 类型 | 默认 | 必填 | 描述 |
---|---|---|---|---|
title | String bool | - | 否 | 标题,false为隐藏标题栏 |
content | String | - | 是 | 内容 |
time | int | - | 否 | 设置多久自动关闭,单位毫秒(1s=1000ms),默认不自动关闭弹窗 |
btn | array false | false | 否 | 按钮设置,如果为false,不显示按钮,如果为数组,第一个为确认,第二个为取消 |
yes | function | - | 否 | 确认按钮的回调函数 |
no | function | - | 否 | 取消按钮和关闭回调函数 |
让我们来看一个简单的示例
语法:ice.pop(Json|String)
Pop参数(String),等同传递Json参数{content:String}
Pop参数(Json)
参数 | 类型 | 默认 | 必填 | 描述 |
---|---|---|---|---|
content | String | - | 是 | 内容 |
icon | String | default | 否 | 图标:default: 默认 success: 成功 fail: 失败 warning: 警告 ask: 询问 none: 无图标 |
time | int | 2000 | 否 | 设置多久自动关闭,单位毫秒(1s=1000ms),默认不自动关闭弹窗 |
url | String | - | 否 | 弹窗结束后的跳转链接 |
callback | function | - | 否 | 弹窗结束后的回调函数 |
让我们来看一个简单的示例
语法:data-open="元素.class或#id"
语法:data-ani="ani-in"
data-ani为弹窗的动画显示方式,设定值如下:(也可以自定义其它)
ani-in:淡入
ani-up-in:向下下滑淡入
ani-down-in:向上滑淡入
ani-left-in:向右滑淡入
ani-right-in:向左滑淡入
让我们来看一个简单的示例
提示,关闭模态弹窗可以给按钮添加一个close的class即可!
hello
hello
语法:ice.alert(Json|String)
alert参数(String),等同传递Json参数{content:String}
alert参数(Json)
参数 | 类型 | 默认 | 必填 | 描述 |
---|---|---|---|---|
content | String | - | 是 | 内容 |
btn | array false | false | 否 | 按钮设置,如果为false,不显示按钮,如果为数组,第一个为确认,第二个为取消 |
yes | function | - | 否 | 确认按钮的回调函数 |
no | function | - | 否 | 取消按钮和关闭回调函数 |
让我们来看一个简单的示例