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

					'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"      : {}, //按钮对象
实例演示

参数配置

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

参数配置

			// 判断是否已存在,如果已存在则直接显示
			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'   : '450px',
				'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'   : '400',
				'height'  : '300',
				'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://www.sucaihuo.com";
					}
				}
			})

基本参数

style - String

默认:'wap'

选项wappc

释义:设置显示样式

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

title - String

默认:''

释义:设置标题

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

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",
			})

默认: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() //销毁掉
					}
				}
			})

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

来源:懒人素材