alert.js说明文档
演示demo
基础参数
返回对象
内置方法
alert.js弹层说明 此为 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)
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://fy.035k.com";
}
}
})
基本参数
style - String
默认：'wap'
选项：wappc
释义：设置显示样式
var dialog = jqueryAlert({
'style' : 'wap',
})
title - String
默认：''
释义：设置标题
var dialog = jqueryAlert({
'title' : '温馨提示',
})
content - String
默认：''
释义：设置内容
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,
})
默认：{}
释义：只能传入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() //销毁掉
}
}
})