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

评分

浏览器兼容

核心方法（配置）: 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" : {}, //按钮对象

实例演示

提示 按钮1 按钮2 不使用动画 动画2 捕获页 iframe层 iframe窗 pc弹层

提示参数配置

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

按钮1参数配置

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

按钮2参数配置

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

动画2参数配置

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

iframe层参数配置

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

iframe窗参数配置

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

PC弹层参数配置

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

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

title- String

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

content- String/jQuery对象

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

contentTextAlign- String

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

width- Number/String

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

height- Number/String

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

minWidth- Number/String

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

className- String

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

position- String

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

animateType- String

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

modal- Boolean

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

isModalClose- Boolean

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

bodyScroll- Boolean

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

closeTime- number

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

buttons- Object

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

返回对象

dialog- Object

var dialog = jqueryAlert({ })

内置方法

close()- 关闭当前窗口

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

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

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

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

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