alert.js说明文档
演示demo
基础参数
返回对象
内置方法
alert.js弹层说明 此为 PC 和 手机 都兼容的弹层组件
引入说明
<link rel="stylesheet" href="css/alert.css"> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src='js/alert.js'></script>
评分
浏览器兼容
浏览器兼容，下面是我们的主要兼容目标
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', //wap | pc | actionsheet
'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, //当没有按钮时关闭时间
'actionsheetCloseText' : '', //当前样式为actionsheet时有效，关闭的文字按钮
"buttons" : {}, //按钮对象
"end" : function(){}, //关闭弹框后的回调
参数配置
// 判断是否已存在，如果已存在则直接显示
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";
}
}
})
参数配置
// 判断是否已存在，如果已存在则直接显示
if(M.actionsheet){
return M.actionsheet.show();
}
//注意:因actionsheet是后添加方法，所以只有以下参数设置有效
//上面那些多余的参数对此无效
M.actionsheet = jqueryAlert({
'style' : 'actionsheet',
'title' : '我是一个标题',
"className" : '', //添加类名
'modal' : true,
'actionsheetCloseText' : '取消',
'buttons' :{
'分享' : function(){
if(M.actionsheet11){
return M.actionsheet11.show();
}
M.actionsheet11 = jqueryAlert({
'content' : '您点击了分享操作'
})
},
'菜单' : function(){
if(M.actionsheet12){
return M.actionsheet12.show();
}
M.actionsheet12 = jqueryAlert({
'content' : '您点击了菜单操作...'
})
},
'示例一' : function(){
if(M.actionsheet13){
return M.actionsheet13.show();
}
M.actionsheet13 = jqueryAlert({
'content' : '您点击了示例一操作...'
})
},
'示例二' : function(){
if(M.actionsheet14){
return M.actionsheet14.show();
}
M.actionsheet14 = jqueryAlert({
'content' : '您点击了示例二操作...'
})
},
}
})
基本参数
style - String
默认：'wap'
选项：wappcactionsheet
释义：设置显示样式
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,
})
actionsheetCloseText - string
默认：""
释义：当前style = 'actionsheet'时有效，值为关闭按钮的文字,值为空时，则无关闭按钮
var dialog = jqueryAlert({
'actionsheetCloseText' : '取消',
})
默认：{}
释义：只能传入key:callback形式,可为多个
var dialog = jqueryAlert({
'buttons' : {
'确定' : function(){
dialog.close();
},
'我不是' : function(){
alert(11)
}
}
})
end - Callback
默认：function(){}
var dialog = jqueryAlert({
'end':function(){
console.log(1111);
},
})
返回对象
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() //销毁掉
}
}
})