1、、基础参数
我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ‘’})layer.msg(‘’, {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块
（1）、type - 基本层类型
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
（2）、title - 标题
类型：String/Array/Boolean，默认：’信息’
title支持三种类型的值，若你传入的是普通的字符串，如title :’我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
（3）、content - 内容
类型：String/DOM/Array，默认：’’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
/!*
如果是页面层
*/
layer.open({
type: 1,
content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM
});
//Ajax获取
$.post('url', {}, function(str){
layer.open({
type: 1,
content: str //注意，如果str是object，那么需要字符拼接。
});
});
/!*
如果是iframe层
*/
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});
/!*
如果是用layer.open执行tips层
*/
layer.open({
type: 4,
content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
}); **（4）、skin - 样式类名**
类型：String，默认：''
skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lan、layui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。
**（5）、area - 宽高**
类型：String/Array，默认：'auto'
在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: '500px'，高度仍然是自适应的。当你宽高都要定义时，你可以area: ['500px', '300px']
**（6）、offset - 坐标**
类型：String/Array，默认：垂直水平居中
offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：
**（7）、icon - 图标。信息框和加载层的私有参数**
类型：Number，默认：-1（信息框）/0（加载层）
信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6，如果是加载层，可以传入0-2。
**（8）、btn - 按钮**
类型：String/Array，默认：'确认'
信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: '我知道了'，当你要定义两个按钮时，你可以btn: ['yes', 'no']。当然，你也可以定义更多按钮，比如：btn: ['按钮1', '按钮2', '按钮3', …]，按钮1和按钮2的回调分别是yes和cancel，而从按钮3开始，则回调为btn3: function(){}，以此类推。
**（9）、btnAlign - 按钮排列**
类型：String，默认：r
你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。btnAlign: 'l'，按钮左对齐；btnAlign: 'c'，按钮居中对齐。
**（10）、closeBtn - 关闭按钮**
类型：String/Boolean，默认：1
layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
**（11）、shade - 遮罩**
类型：String/Array/Boolean，默认：0.3
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
**（12）shadeClose - 是否点击遮罩关闭**
类型：Boolean，默认：false
如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
**（13）、time - 自动关闭所需毫秒**
类型：Number，默认：0
默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
**（14）、id - 用于控制弹层唯一标识**
类型：String，默认：空字符
设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
**（15）anim - 动画**
类型：Number，默认：0
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 ，（请注意，3.0之前的版本用的 shift 参数）
**（16）maxmin - 最大最小化。**
类型：Boolean，默认：false
该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
**（17）fixed - 固定**
类型：Boolean，默认：true
即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可
**（18）、resize - 是否允许拉伸**
类型：Boolean，默认：true
默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效
**（19）、scrollbar - 是否允许浏览器出现滚动条**
类型：Boolean，默认：true
默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽
**（20）、maxWidth - 最大宽度**
类型：，默认：360
请注意：只有当area: 'auto'时，maxWidth的设定才有效。
**（21）、zIndex - 层叠顺序**
类型：，默认：19891014（贤心生日 0.0）
一般用于解决和其它组件的层叠冲突。
**（22）、move - 触发拖动的元素**
类型：String/DOM/Boolean，默认：'.layui-layer-title'
默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: '.mine-move'。你还配置设定move: false来禁止拖拽
**（23）、moveOut - 是否允许拖拽到窗口外**
类型：Boolean，默认：false
默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可
**（24）、moveEnd - 拖动完毕后的回调方法**
类型：Function，默认：null
默认不会触发moveEnd，如果你需要，设定moveEnd: function(){}即可。
**（25）、tips - tips方向和颜色**
类型：Number/Array，默认：2
tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
**（26）、tipsMore - 是否允许多个tips**
类型：Boolean，默认：false
允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
**（27）、success - 层弹出后的成功回调方法**
类型：Function，默认：null
当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。
**（28）、yes - 确定按钮回调方法**
类型：Function，默认：null
该回调携带两个参数，分别为当前层索引、当前层DOM对象。
layer.open({
content: '测试回调',
yes: function(index, layero){
//do something
layer.close(index); //如果设定了yes回调，需进行手工关闭
}
}); **（29）、cancel - 右上角关闭按钮触发的回调**
类型：Function，默认：null
该回调同样只携带当前层索引一个参数，无需进行手工关闭。如果不想关闭，return false即可，
//只有当点击confirm框的确定时，该层才会关闭
cancel: function(index){
if(confirm('确定要关闭么')){
layer.close(index)
}
return false;
} **（30）、end - 层销毁后触发的回调**
类型：Function，默认：null
无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
**（31）、full/min/restore -分别代表最大化、最小化、还原 后触发的回调**
类型：Function，默认：null
携带一个参数，即当前层DOM
**2、实例**
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="layer/jquery-1.10.2.min.js"></script>
<script src="layer/layer.js"></script>
<link rel="stylesheet" href="layer/skin/default/layer.css" />
<style>
div.conten{
width: 100%;
border: 2px solid #C9C5C5;
margin-bottom: 10px;
box-shadow: 5px 5px #CCCCCC;
text-align: center;
}
button.bt{
width: 100px;
height: 40px;
line-height: 40px;
background-color:#2D93CA;
border-radius: 10px;
color:white;
text-align: center;
font-weight: bold;
font-size: 15px;
}
.layer_notice{
margin-bottom: 10px;
text-align: center;
width:200px;
color: #999999;
margin: 0px auto;
}
.layer-photos-demo{
text-align: center;
width:500px;
color: #999999;
margin: 0px auto;
border: 2px solid #C9C5C5;
margin-bottom: 10px;
box-shadow: 5px 5px #CCCCCC;
}
body .demo-class .layui-layer-demo{background:#333;}
</style>
</head>
<body>
<div class="conten">
<button onclick="common(1)" class="bt">普通信息框</button>
<button onclick="common(2)" class="bt">图标</button>
<button onclick="common(3)" class="bt">询问框</button>
<button onclick="common(4)" class="bt">提示层</button>
<button onclick="common(5)" class="bt">墨绿深蓝风</button>
</div>
<div class="conten">
<button onclick="common(6)" class="bt">捕获页</button>
<button onclick="common(7)" class="bt">页面层</button>
<button onclick="common(8)" class="bt">自定页</button>
<button onclick="common(9)" class="bt" >tips层</button>
<button onclick="common(10)" class="bt">iframe层</button>
</div>
<div class="conten">
<button onclick="common(11)" class="bt">iframe窗</button>
<button onclick="common(12)" class="bt">加载层</button>
<button onclick="common(13)" class="bt">loading层</button>
<button onclick="common(14)" class="bt">小tips</button>
<button onclick="common(15)" class="bt">prompt层</button>
</div>
<div class="conten">
<button onclick="common(16)" class="bt">tap层</button>
<button onclick="common(17)" class="bt">相册层</button>
</div>
<div class=" layer_notice">傲不可长，欲不可纵，乐不可极，志不可满。</div>
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-pid="图片id，可以不写" layer-src="img/1.jpg" src="img/11.jpg" alt="图片名">
<img layer-pid="图片id，可以不写" layer-src="img/2.jpg" src="img/22.jpg" alt="图片名">
<img layer-pid="图片id，可以不写" layer-src="img/4.jpg" src="img/44.jpg" alt="图片名">
<img layer-pid="图片id，可以不写" layer-src="img/5.jpg" src="img/55.jpg" alt="图片名">
<img layer-pid="图片id，可以不写" layer-src="img/7.jpg" src="img/77.jpg" alt="图片名">
</div>
<script>
function common(n){
if(n==1){
//layer.alert(content, options, yes) - 普通信息框
layer.alert('有了回调', {title:'提示'},function(index){
layer.alert('加了个图标', {icon: 1},function(index){
layer.alert('只想简单的提示',function(index){
layer.close(index);//没有close就需要手动关闭
});
});
});
}else if(n==2){
//图标
layer.alert('图标0', {icon: 0},function(index){
layer.alert('图标'+index, {icon: 1},function(index){
layer.alert('图标'+index, {icon: 2},function(index){
layer.alert('图标'+index, {icon: 3},function(index){
layer.alert('图标'+index, {icon: 4},function(index){
layer.alert('图标'+index, {icon: 5},function(index){
layer.alert('图标'+index, {icon: 6},function(index){
layer.close(index);
})
})
})
})
})
})
})
}else if(n==3){
//layer.confirm(content, options, yes, cancel) - 询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'], //按钮
icon: 3,
title:'提示'
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
}else if(n==4){
//layer.msg(content, options, end) - 提示框，3秒后自动消失
layer.msg('玩命提示中',{
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
layer.msg('呵呵');
});
}else if(n==5){
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv', //样式类名
closeBtn: 0//layer提供了两种风格的关闭按钮
}, function(){
layer.alert('深蓝style', {
skin: 'layui-layer-lan',
closeBtn: 0,//layer提供了两种风格的关闭按钮
anim: 4 //动画类型
});
});
}else if(n==6){
//捕获页
layer.open({
type: 1,
shade: false,
area: ['420px', '240px'], //宽高
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {
time: 5000,
icon:6
});
}
});
}else if(n==7){
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
}else if(n==8){
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,//anim可支持的动画类型有0-6
shadeClose: true, //开启遮罩关闭
content: '内容'
});
}else if(n==9){
//tips层
layer.tips('Hi，我是tips', '.layer_notice',{tips:2});
}else if(n==10){
//iframe层
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,//是否点击遮罩关闭
shade:[0.8,'#393D49'],//遮罩
area: ['380px', '90%'],
content: 'http://blog.csdn.net/qq_27626333/article/details/53674829' //iframe的url
});
}else if(n==11){
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],//不显示遮罩
area: ['340px', '215px'],
offset: 'rb', //右下角弹出
time: 2000, //2秒后自动关闭
anim: 2,
content: ['http://blog.csdn.net/qq_27626333/article/details/53674829', 'no'], //iframe的url，no代表不显示滚动条
end: function(){ //此处用于演示
layer.open({
type: 2,
title: '很多时候，我们想最大化看，比如像这个页面。',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['893px', '600px'],
content: 'http://blog.csdn.net/qq_27626333/article/details/53674829'
});
}
});
}else if(n==12){
//layer.load(icon, options) - 加载层
var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒
//关闭
//layer.close(index);
}else if(n==13){
//loading层
var index = layer.load(1, {
shade: [0.1,'#fff'],//0.1透明度的白色背景
time:1000
});
}else if(n==14){
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '.layer_notice', {
tips: [1, '#3595CC'],
time: 4000
});
}else if(n==15){
//layer.prompt(options, yes) - 输入层
//formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
//value: '', //初始时的值，默认空字符
//maxlength: 140, //可输入文本的最大长度，默认500
//yes携带value表单值、index索引、elem表单元素
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
layer.close(index);
layer.msg('演示完毕！您的口令：'+ pass +'您最后写下了：'+text);
});
});
}else if(n==16){
//layer.tab(options) - tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});
}else if(n==17){
//相册层
layer.photos({
photos: '#layer-photos-demo',
anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
}
</script>
</body>
</html>
