alert.js说明文档

演示demo

基础参数

返回对象

内置方法

alert.js弹层说明 此为 PC 和 手机 都兼容的弹层组件

alert.js是基于jQuery开发的一款 PC 移动端 都兼容的轻量级弹层组件

评分

如果觉得好用，记得给我们留言哦

浏览器兼容

浏览器兼容，下面是我们的主要兼容目标

1、IE8 或者 IE8以上 (Windows), IE8以下浏览器不兼容

2、Safari (Mac)

3、Chrome (Windows, Mac, Linux)

4、Firefox (Windows, Mac, Linux)

5、谷歌内核(webkit)浏览器，如360浏览器，搜狗浏览器，QQ浏览器等

核心方法（配置）: jqueryAlert(opts)

opts是一个对象，它包含了以下key: '默认值'

javascript 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'style'        : 'wap', //移动端和PC端
'title'        : '',    //标题
'content'      : '',    //内容
'contentTextAlign' : 'center', //内容对齐方式
'width'        : 'auto', //宽度
'height'       : 'auto', //高度
'minWidth'     : '0', //最小宽度
"className"    : '', //添加类名
'position'     : 'fixed', //定位方式
'animateType'  : 'scale',
'modal'        : false, //是否存在蒙层
'isModalClose' : false, //点击蒙层是否关闭
'bodyScroll'   : false, //是否关闭body的滚动条
'closeTime'    : 3000, //当没有按钮时关闭时间
"buttons"      : {}, //按钮对象
实例演示

参数配置

1
2
3
4
5
6
7
// 判断是否已存在，如果已存在则直接显示
if(M.dialog1){
    return M.dialog1.show();
}
M.dialog1 = jqueryAlert({
    'content' : 'hello 程序员...'
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
// 判断是否已存在，如果已存在则直接显示
if(M.dialog2){
    return M.dialog2.show();
}
M.dialog2 = jqueryAlert({
    'content' : 'hello 程 序 员 ...',
    'modal'   : true,
    'buttons' :{
        '确定' : function(){
            M.dialog2.close();
        }
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 判断是否已存在，如果已存在则直接显示
if(M.dialog3){
    return M.dialog3.show();
}
M.dialog3 = jqueryAlert({
    'title'   : 'alertjs提示',
    'content' : '欢迎使用alertjs弹层 ...',
    'modal'   : true,
    'buttons' :{
        '确定' : function(){
            M.dialog3.close();
        },
        '我不是' : function(){
            if(M.dialog31){
                return M.dialog31.show();
            }
            M.dialog31 = jqueryAlert({
                'content' : '我不是程序员...'
            })
        }
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 判断是否已存在，如果已存在则直接显示
if(M.dialog4){
    return M.dialog4.show();
}
M.dialog4 = jqueryAlert({
    'title'   : 'alertjs提示',
    'content' : '欢迎使用alertjs弹层 ...',
    'modal'   : true,
    'animateType' : '',
    'buttons' :{
        '确定' : function(){
            M.dialog4.close();
        },
        '不使用' : function(){
            if(M.dialog41){
                return M.dialog41.show();
            }
            M.dialog41 = jqueryAlert({
                'content' : '祝您找到更好用的...'
            })
        }
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 判断是否已存在，如果已存在则直接显示
if(M.dialog5){
    return M.dialog5.show();
}
M.dialog5 = jqueryAlert({
    'content' : alertContent ,
    'modal'   : true,
    'contentTextAlign' : 'left',
    'width'   : '450px',
    'animateType' : 'linear',
    'buttons' :{
        '不同意' : function(){
            M.dialog5.close();
        },
        '同意' : function(){
            if(M.dialog51){
                return M.dialog51.show();
            }
            M.dialog51 = jqueryAlert({
                'content' : '同意也不能注册哦...'
            })
        }
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 判断是否已存在，如果已存在则直接显示
if(M.dialog6){
    return M.dialog6.show();
}
M.dialog6 = jqueryAlert({
    'style'   : 'pc',
    'title'   : '捕获页',
    'content' :  $("#alert-blockquote"),
    'modal'   : true,
    'contentTextAlign' : 'left',
    'width'   : 'auto',
    'animateType' : 'linear',
    'buttons' :{
        '关闭' : function(){
            M.dialog6.close();
        },
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 判断是否已存在，如果已存在则直接显示
if(M.dialog7){
    return M.dialog7.show();
}
M.dialog7 = jqueryAlert({
    'style'   : 'pc',
    'title'   : 'iframe层',
    'content' :  alertContent,
    'modal'   : true,
    'contentTextAlign' : 'left',
    'width'   : '400',
    'height'  : '300',
    'animateType' : 'linear',
    'buttons' :{
        '关闭' : function(){
            M.dialog7.close();
        },
    }
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 判断是否已存在，如果已存在则直接显示
if(M.dialog8){
    return M.dialog8.show();
}
M.dialog8 = jqueryAlert({
    'style'   : 'pc',
    'title'   : 'iframe窗',
    'content' :  $(".alert-box"),
    'modal'   : true,
    'contentTextAlign' : 'left',
    'width'   : '90%',
    'height'  : '90%',
    'animateType': 'scale',
})

参数配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 判断是否已存在，如果已存在则直接显示
if(M.dialog9){
    return M.dialog9.show();
}
M.dialog9 = jqueryAlert({
    'style'   : 'pc',
    'title'   : 'pc弹层',
    'content' :  'PC端普通弹层呦呦呦...',
    'modal'   : true,
    'contentTextAlign' : 'left',
    'animateType': 'scale',
    'bodyScroll' : 'true',
    'buttons' : {
        '关闭' : function(){
            M.dialog9.close();
        },
        '去首页' : function(){
            location.href="http://www.datouwang.com";
        }
    }
})

基本参数

style - String

默认：'wap'

选项：wappc

释义：设置显示样式

1
2
3
var dialog = jqueryAlert({
    'style' :  'wap',
})

title - String

默认：''

释义：设置标题

1
2
3
var dialog = jqueryAlert({
    'title' :  '温馨提示',
})

content - String/jQuery对象

默认：''

释义：设置内容

1
2
3
var dialog = jqueryAlert({
    'content' :  '普通弹层呦呦呦...',
})

contentTextAlign - String

默认：center

选项：centerleftright

释义：设置内容对齐方式

1
2
3
var dialog = jqueryAlert({
    'contentTextAlign' : "left",
})

width - Number/String

默认：auto

释义：设置宽度

1
2
3
var dialog = jqueryAlert({
    'width' : "500",
})

height - Number/String

默认：auto

释义：设置高度

1
2
3
var dialog = jqueryAlert({
    'height' : "500",
})

minWidth - Number/String

默认：0

释义：设置最小宽度

1
2
3
var dialog = jqueryAlert({
    'minWidth' : "160",
})

className - String

默认：""

释义：给弹层添加一个特殊的类名，方便调整自己的样式

1
2
3
var dialog = jqueryAlert({
    'className' : "myDialog1",
})

position - String

默认：fixed

选项：fixedabsolute

释义：使用定位情况

1
2
3
var dialog = jqueryAlert({
    'position' : "fixed",
})

animateType - String

默认：scale

选项：scalelinear为空或其他则为fadeIn动画

释义：使用动画

Bug：在IE8下动画效果失效

1
2
3
var dialog = jqueryAlert({
    'animateType' : "scale",
})

modal - Boolean

默认：false

释义：是否添加蒙层

1
2
3
var dialog = jqueryAlert({
    'modal' : true,
})

isModalClose - Boolean

默认：false

释义：点击蒙层时是否关闭

1
2
3
var dialog = jqueryAlert({
    'isModalClose' : true,
})

bodyScroll - Boolean

默认：false

释义：弹出蒙层是否禁止滚动

1
2
3
var dialog = jqueryAlert({
    'bodyScroll' : true,
})

closeTime - number

默认：3000

释义：如果所有按钮不存在并且style参数 != 'pc'则此参数生效

1
2
3
var dialog = jqueryAlert({
    'closeTime' : 3000,
})

buttons - Object

默认：{}

释义：只能传入key:callback形式,可为多个

1
2
3
4
5
6
7
8
9
10
var dialog = jqueryAlert({
    'buttons' : {
        '确定' : function(){
            dialog.close();
        },
        '我不是' : function(){
            alert(11)
        }
    }
})

返回对象

dialog - Object

释义：组件内部返回dialog对象，需要变量做接收

1
2
var dialog = jqueryAlert({
})

内置方法

close() - 关闭当前窗口

释义：关闭当前窗口方法

1
2
3
4
5
6
7
8
// 判断是否已存在，如果已存在则直接显示
M.dialog = jqueryAlert({
    'buttons' : {
        '关闭' : function(){
            M.dialog.close() //关闭
        }
    }
})

show() - 当DOM元素已经存在时，调用

如果不想每次都重新生成一遍模板，那么必须加上这段代码

释义：如果M.dialog存在，则直接调用 show方法

1
2
3
4
5
6
// 判断是否已存在，如果已存在则直接显示
if(M.dialog){
    return M.dialog.show();
}
M.dialog = jqueryAlert({
})

destroy() - 销毁组件的HTML代码

如果想每次都重新生成一遍模板，那么把上次的代码销毁掉是必要的

释义：当关闭时销毁掉组件的html代码

1
2
3
4
5
6
7
M.dialog = jqueryAlert({
    'buttons' : {
        '关闭' : function(){
            M.dialog.destroy() //销毁掉
        }
    }
})

适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。

来源：站长素材