一款js弹出框插件,适用于移动端和PC端,用于代替系统自带弹出框,优点是定制功能强大, 有jquery和原生js两个版本, 缺点是不兼容IE8以下浏览器
文件目录:
API Document
说明: 一个页面内始终只有一个弹窗框
skin: 皮肤
说明: 1 白色 2黑色
例:
skin: 1
width: 弹出框宽度
说明: 支持px、%、rem、vw等css单位
例:
width: "auto"
icon: 图标类型
说明: "ok" 确定框, "loding" 加载框, "bubble" 气泡框, "warning" 警告框
例:
icon: "ok"
delay: 自动关闭
说明: 多少秒后自动关闭弹出框
例:
delay: 1
title: 弹出窗标题
例:
title: "天地无极"
content: 弹出窗内容
例:
content: "挑选股票、债券或基金是一个技术活,却不是一门需要精确的科学。这通常意味着凡事并不是多多益善,我们需要放过一些事实和数据。"
style: 内容样式
说明: 必须和content选项配合使用, 可以通过css自定义样式
例:
style: "font-size: 20px;color: red; line-height:30px"
inputAttr: 表单属性
说明: 可以添加各种input属性, 如placeholder、type、maxlength等
例:
inputAttr: {type: "text", maxlength: 10}
maskOpacity: 遮罩层透明度
说明: 默认0.4
例:
maskOpacity: .6
maskClose: 点击遮罩层是否关闭弹出窗
说明: 默认不关闭
例:
maskClose: true
animate: 是否开启弹出动画
说明: 默认开启
例: animate: true
delayCallback: 弹出窗自动关闭后的回调函数
例:
delayCallback: function(){
console.log('我是回调函数')
}
buttons: 按钮组
说明: buttons类型是数组, 数组成员是对象, 包括color按钮颜色、text按钮文本、type按钮类型、callback按钮回调函数等。
例:
buttons: [
{
color: "blue",
text: "取消",
type: "cancel",
callback: function(){
console.log('取消')
}
},
{
color: "blue",
text: "确定",
type: "confirm"
callback: function(){
console.log('确认')
}
}
]
close(): 关闭弹窗
说明: 用做外部函数回调 例:
var ykDialog = dialog({title: "今天是几号?"})
function close(){
var timer = setInterval(function(){
ykDialog.close()
}, 2000)
}