基本属性：
<!DOCTYPE html> <html> <head> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <link rel="stylesheet" href="css/layer.css" media="all"> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script src="js/layer.js"></script> </head> </head> <body> <div class="clear box layer-main"> <a href="javascript:;" onclick="test();">点我弹窗</a> </div> </body> <script> function test() { //在这里面输入任何合法的js语句 layer.open({ type: 1, //page层 area: ['70%', '30%'], title: '弹出框', shade: 0.6,//遮罩透明度 shadeClose:true,//点击遮罩关闭层 moveType: 1,//拖拽风格，0是默认，1是传统拖动 shift: 1,//0-6的动画形式，-1不开启 fix:true,//不随滚动条滚动，一直在可视区域。 border:[0], closeBtn:[1,true], content: '<div style="padding:10px;">这是一个非常普通的页面层，可以传入内容</div>', btn:['确定','取消'] }); } </script> </html>
我是为了测试移动端效果，才加的meta标签，可以去掉。体验pc端的效果。个人感觉pc端效果更好，移动端可以将就这用。
| 键: 值 | 描述 |
| 下表的属性都是默认值，您可在调用时按需重新配置，他们可帮助你实现各式各样的风格。如是调用： $.layer({键: 值, 键: 值, …}); | |
| type: 0 | 层的类型。0：信息框（默认），1：页面层，2：iframe层，3：加载层，4：tips层。
此为重要参数，不同类型层的总开关，若为type:0则不需要配置，其它类型层在调用时必须设置type。 |
| title: '信息' | 控制默认标题栏。 如想自定义标题样式，可以 title: ['标题', 'background:#c00;'] //第二个参数可书写任意css 如不想显示标题栏，配置title: false 即可 |
| maxmin: false | 是否输出窗口最小化/全屏/还原按钮。 如需要开启，设置maxmin: true 即可 此功能为layer1.8开始新增 |
| offset: ['', ''] | 控制层坐标。 offset的值分别是： [纵坐标, 横坐标]，默认为垂直水平居中 如果您要设定纵坐标，可以：offset:['200px', '']/td> |
| area: ['310px', '130px'] | 控制层宽高。 area值分别为：[宽度, 高度] 当设置为auto时，意味着采用自适应（iframe层不能设置auto）, 对于宽度，并不推荐您设置auto。 |
| border: [10, 0.3, '#000'] | 控制层的边框。 border的值分别为：[边框大小, 透明度, 颜色, layer1.8之前需在此处加true] 如果您不想显示border，设置 border: [0] 即可 |
| shade: [0.5, '#000'] | 控制遮罩。 值分别是：[遮罩透明度, 遮罩颜色, layer1.8之前需在此处加true] 如果不想显示遮罩，配置shade: [0]即可 |
| shadeClose: false | 用来控制点击遮罩区域是否关闭层。 若开启，设为true即可 |
| closeBtn: [0, true] | 控制层右上角关闭按钮。 closeBtn的值分别为: [关闭按钮的风格（支持0和1）, true] 若不想显示关闭按钮，配置 closeBtn: false即可 |
| time: 0 | 自动关闭等待秒数，整数值。 0表示不自动关闭，若3秒后自动关闭，time: 3即可 |
| fix: true, | 用于设定层是否不随滚动条而滚动，固定在可视区域。 |
| move: '.xubox_title' | 设定某个元素来实现对层的拖拽。 值为：用来拖拽的元素选择器 若不想拖拽，move: false即可 |
| moveOut: false | 用于控制层是否允许被拖出可视窗口外 |
| moveType: 0 | 用于配置拖拽类型（layer1.7之前版本不支持） 默认为引导式拖动层，若值设为1，则直接拖动层 |
| bgcolor: '#fff' | 用于控制层的背景色 如果不想设置任何颜色，设置空字符即可。但是对于type:0的对话框层而言，始终都是白色 |
| zIndex: 19891014 | 控制层堆叠顺序（即css的z-index）。整数值。 合理设置它，可以避免与其它插件的层级冲突 |
| maxWidth: 400 | 最大宽度。整数值。 当area宽度设为auto时才有用。 |
| fadeIn: 300, | 用于控制层渐显弹出（layer1.7之前版本不支持） 值为毫秒数 |
| btns: 1, | 按钮的个数。提供了0-2的选择，设置0表示不输出按钮 |
| btn: ['确定', '取消'], | [按钮一的文本值 , 按钮二的文本值] 必须btns值大于0才有效 |
| shift: '', | 用于控制动画弹出 有七种选择：左上(left-top),上(top), 右上(right-top),右下(right-bottom),下(bottom),左下(left-bottom),左('left')。 如shift:'top' 表示从上动画弹出 |
dialog: {
type: 3,
msg: ''
}
|
信息框层模式提供的私有参数。使用时，按需配置即可 type: 图标类型，提供了0-16的选择，也许有你喜欢的。 设置-1不显示图标 msg: 信息框内容，重要参数 |
page: {
dom: '#id',
html: '',
url: '',
ok: function(datas){}
}
|
页面层模式私有参数。 dom: 页面已存在的选择器 html: 直接传入的html字符串。 url: ajax请求地址。 ok: ajax请求完毕后执行的回调，datas是异步传递过来的值。 需要特别注意的是，dom、html、url只需设定其中一个就行，若配置html或url，你必须也配置宽高值。 |
iframe: {
src: '',
scrolling: 'auto'
}
|
iframe层模式私有参数。 src: 要打开的网址。 scrolling: 是否允许iframe出现滚动条，默认自动。允许：'yes'，不允许：'no' |
loading: {
type: 0
}
|
加载层私有属性。 type: loading图标类型（提供了0-3的选择）。 一般配合ajax使用 |
tips : {
msg: '',
follow: '#id',
guide: 0,
isGuide: true,
more: false,
style: ['', '']
}
|
tips提示层私有属性。 msg: 提示内容。 follow: 吸附目标选择器。 guide: 指引方向（0：上，1：右，2：下，3：左）。 isGuide: 是否显示默认三角形。 这个参数可配合msg帮助你自定义三角形icon more: 是否允许多个tips style: [' color:#000; border:1px solid #FF9900; /* 此处可用来自定义tips的css样式 */', '#FF9900']]。 数组第二个值，为三角形的颜色。 |
| 回调函数 | |
success: function(layero){
}
|
层弹出成功后的回调函数. layero是回调传过来的当前层容器的实例，这意味着你可以对当前弹层进行dom操作 |
yes: function(index){}
|
按钮一的回调函数 index为当前层的索引，主要用来回调执行后，配合layer.close(index)来关闭层 |
no: function(index){}
|
按钮二的回调函数 |
close: function(index){}
|
层右上角关闭按钮的点击事件触发回调函数。 |
end: function(){}
|
层被彻底关闭后执行的回调函数。 |
moveEnd: function(){}
|
拖拽完毕触发的回调函数 |
min: function(layero){},
full: function(layero){},
restore: function(layero){}
|
分别为最小化、全屏、还原触发后的回调函数 layero是当前层容器的实例 layer1.8开始新增 |
下面这些是为了凑字数：
<!DOCTYPE html>
<html>
<head>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" href="css/layer.css" media="all">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script src="js/layer.js"></script>
</head>
</head>
<body>
<div class="clear box layer-main">
<a href="javascript:;" onclick="test();">点我弹窗</a>
</div>
</body>
<script>
function test() {
//在这里面输入任何合法的js语句
layer.open({
type: 1,
//page层
area: ['70%', '30%'],
title: '弹出框',
shade: 0.6,//遮罩透明度
shadeClose:true,//点击遮罩关闭层
moveType: 1,//拖拽风格，0是默认，1是传统拖动
shift: 1,//0-6的动画形式，-1不开启
fix:true,//不随滚动条滚动，一直在可视区域。
border:[0],
closeBtn:[1,true],
content: '<div style="padding:10px;">这是一个非常普通的页面层，可以传入内容</div>',
btn:['确定','取消']
});
}
</script>
</html>