alert.js说明文档

演示demo

- 默认提示
- 正确提示
- 错误提示
- 警告提示
- 按钮1
- 按钮2
- 不使用动画
- 动画2
- 捕获页
- iframe层
- iframe窗
- pc弹层

基础参数

- style
- title
- icon
- content
- contentTextAlign
- width
- height
- minWidth
- className
- position
- animateType
- modal
- isModalClose
- bodyScroll
- closeTime
- buttons

返回对象

- dialog

内置方法

- dialog.close
- dialog.show
- dialog.destroy

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 代码:

    						'style'        : 'wap', //移动端和PC端
    						'title'        : '',    //标题
    						'icon'         : '',  //示例 ：'img/right.png' url地址 只对没有按钮且没有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"      : {}, //按钮对象

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog1){
    					return M.dialog1.show();
    				}
    				M.dialog1 = jqueryAlert({
    					'content' : 'hello 程序员...',
    					'closeTime' : 2000,
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog11){
    					return M.dialog11.show();
    				}
    				M.dialog11 = jqueryAlert({
    					'icon'    : 'img/right.png',
    					'content' : 'hello 程序员...',
    					'closeTime' : 2000,
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog12){
    					return M.dialog12.show();
    				}
    				M.dialog12 = jqueryAlert({
    					'icon'    : 'img/error.png',
    					'content' : 'hello 程序员...',
    					'closeTime' : 2000,
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog13){
    					return M.dialog13.show();
    				}
    				M.dialog13 = jqueryAlert({
    					'icon'    : 'img/warning.png',
    					'content' : 'hello 程序员...',
    					'closeTime' : 2000,
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog2){
    					return M.dialog2.show();
    				}
    				M.dialog2 = jqueryAlert({
    					'content' : 'hello 程 序 员 ...',
    					'modal'   : true,
    					'buttons' :{
    						'确定' : function(){
    							M.dialog2.close();
    						}
    					}
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				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' : '我不是程序员...'
    							})
    						}
    					}
    				})

参数配置

    					// 判断是否已存在，如果已存在则直接显示
    					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' : '祝您找到更好用的...'
    								})
    							}
    						}
    					})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog5){
    					return M.dialog5.show();
    				}
    				M.dialog5 = jqueryAlert({
    					'content' : alertContent ,
    					'modal'   : true,
    					'contentTextAlign' : 'left',
    					'width'   : '400px',
    					'animateType' : 'linear',
    					'buttons' :{
    						'不同意' : function(){
    							M.dialog5.close();
    						},
    						'同意' : function(){
    							if(M.dialog51){
    								return M.dialog51.show();
    							}
    							M.dialog51 = jqueryAlert({
    								'content' : '同意也不能注册哦...'
    							})
    						}
    					}
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				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();
    						},
    					}
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				if(M.dialog7){
    					return M.dialog7.show();
    				}
    				M.dialog7 = jqueryAlert({
    					'style'   : 'pc',
    					'title'   : 'iframe层',
    					'content' :  alertContent,
    					'modal'   : true,
    					'contentTextAlign' : 'left',
    					'width'   : '300',
    					'height'  : '200',
    					'animateType' : 'linear',
    					'buttons' :{
    						'关闭' : function(){
    							M.dialog7.close();
    						},
    					}
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				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',
    				})

参数配置

    				// 判断是否已存在，如果已存在则直接显示
    				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://fy.035k.com";
    						}
    					}
    				})

基本参数

style - String

默认：'wap'

选项：wappc

释义：设置显示样式

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

title - String

默认：''

释义：设置标题

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

icon - String

默认：''

释义：在title与buttons都不存在的时候设置icon才生效

    				var dialog = jqueryAlert({
    					'icon'    : 'img/right.png',
    					'content' :  '温馨提示',
    				})

content - String/jQuery对象

默认：''

释义：设置内容

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

contentTextAlign - String

默认：center

选项：centerleftright

释义：设置内容对齐方式

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

width - Number/String

默认：auto

释义：设置宽度

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

height - Number/String

默认：auto

释义：设置高度

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

minWidth - Number/String

默认：0

释义：设置最小宽度

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

className - String

默认：""

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

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

position - String

默认：fixed

选项：fixedabsolute

释义：使用定位情况

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

animateType - String

默认：scale

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

释义：使用动画

Bug：在IE8下动画效果失效

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

modal - Boolean

默认：false

释义：是否添加蒙层

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

isModalClose - Boolean

默认：false

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

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

bodyScroll - Boolean

默认：false

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

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

closeTime - number

默认：3000

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

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

buttons - Object

默认：{}

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

    				var dialog = jqueryAlert({
    					'buttons' : {
    						'确定' : function(){
    				            dialog.close();
    				        },
    				        '我不是' : function(){
    				            alert(11)
    				        }
    					}
    				})

返回对象

dialog - Object

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

    				var dialog = jqueryAlert({
    				})

内置方法

close() - 关闭当前窗口

释义：关闭当前窗口方法

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

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

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

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

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

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

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

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

    				M.dialog = jqueryAlert({
    					'buttons' : {
    						'关闭' : function(){
    							M.dialog.destroy() //销毁掉
    						}
    					}
    				})