Popup弹窗
弹窗的应用十分普遍,这里提供了几种弹窗风格,具体请看示例。
Popup弹出层
状态
标准弹窗
无标题栏弹窗
有页脚栏弹窗
有背景弹窗
iframe弹窗
动画
上边滑入
右边滑入
下边滑入
左边滑入
位置
顶部弹出
底部弹出
左边弹出
右边弹出
左上角弹出
左下角弹出
右上角弹出
右下角弹出
颜色
黑色
灰色
红色
橙色
黄色
绿色
青色
蓝色
紫色
Modal模态弹窗
使用data-open方式打开对应的视图层,可以为id或class,注意前缀符号#和.
自定义1
自定义2
红尘浅遇,散去流年花开。路过的落幕,注定只是生命中的痕迹。从此再无余温。也没有任何残留。 剩下的只有这个无言的画面,和这座荒凉的天空。从此。这个地方和那段往昔。 与相遇划出了永远的界线,再也没有任何理由和借口。来偷偷的怀念这段曾经的你,和这段曾经的执着。 以一颗曾少年追琢的心,来经营自己的天涯。
Notes小便贴提示
默认右侧弹出
左侧弹出
上面弹出
下面弹出
Prompt提示对话框
点击我看看吧
标准提示框
无按钮提示框
Pop提示框
默认提示框
成功提示框
失败提示框
警告提示框
询问提示框
无图标提示框
Alert询问框
alert小弹窗
Popup API
Popup 弹出层

语法:ice.popup(Json)

Popup参数(Json)

参数 类型 默认 必填 描述
title String bool - 标题,false为隐藏标题栏
content String - 内容,当设置url字段时,为非必传
width String 400px 宽度设置
height String 270px 高度设置
url String - iframe的方式加载,url为网址或页面路径
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底部左下角内容

让我们来看一个简单的示例

示例

如何在弹窗中自定义一个关闭弹窗的按钮,看示例。

示例

Prompt API
Prompt提示对话框

语法: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 - 取消按钮和关闭回调函数

让我们来看一个简单的示例

示例

Pop API
Pop提示对话框

语法: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 - 弹窗结束后的回调函数

让我们来看一个简单的示例

示例

Modal模态弹窗
Modal模态弹窗

语法:data-open="元素.class或#id"

让我们来看一个简单的示例

提示,关闭模态弹窗可以给按钮添加一个close的class即可!

示例

Alert API
Alert提示对话框

语法:ice.alert(Json|String)

alert参数(String),等同传递Json参数{content:String}

alert参数(Json)

参数 类型 默认 必填 描述
content String - 内容
btn array false false 按钮设置,如果为false,不显示按钮,如果为数组,第一个为确认,第二个为取消
yes function - 确认按钮的回调函数
no function - 取消按钮和关闭回调函数

让我们来看一个简单的示例

示例

代码示例