layUi的重要组件之一--------------弹出层

在layUi中弹出层是最常用的组件之一，今天我就简单介绍一下它的基础参数

1，内置方法：
layer.open、layer.msg

2，type - 基本层类型
5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）

3，title - 标题
3-1：传入普通的字符串，只会改变标题文本，title :‘标题’
3-2：自定义标题区域样式，title: [‘标题’, ‘font-size:18px;’]
3-3：不显示标题栏：title: false

4，content - 内容
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。
类型 1 常用的两种方式：

layer.open({
  type: 1, 
  content: '内容' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});

类型 2

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 

5，area - 宽高

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
6，btn - 按钮

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: ‘ok’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]。也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}
示例：

layer.open({
  content: 'test'
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

7，btnAlign - 按钮排列
可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。
btnAlign: ‘l’ 按钮左对齐
btnAlign: ‘c’ 按钮居中对齐
btnAlign: ‘r’ 按钮右对齐。默认值，不用设置

在这里我就只简单介绍了一些我们常用的类型，还有
closeBtn - 关闭按钮
shade - 遮罩
anim - 弹出动画
id - 用于控制弹层唯一标识等等一些可以查看相关文档

https://www.layui.com/doc/modules/layer.html

我的一些代码：

layer.open({
		    		        type: 1
		    		        ,title:'查看详情'  //标题
		    		        ,closeBtn: 1
		    		        ,area: '400px;'
		    		        ,shade: false
		    		        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
		    		        ,btn: ['确定']
		    		        ,btnAlign: 'c'
		    		        ,moveType: 1 //拖拽模式，0或者1
		    		        ,content: '<div align="center" style="padding: 30px; line-height: 20px; " >'
		    		        	+'员工编号<input type="text" name="wid" autocomplete="off" class="layui-input" value="'+v.wid+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工姓名<input type="text" name="wname" autocomplete="off" class="layui-input" value="'+v.wname+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工年龄<input type="text" name="wage" autocomplete="off" class="layui-input" value="'+v.wage+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工性别<input type="text" name="wsex" autocomplete="off" class="layui-input" value="'+v.wsex+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工电话<input type="text" name="wnum" autocomplete="off" class="layui-input" value="'+v.wnum+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工职位<input type="text" name="wjob" autocomplete="off" class="layui-input" value="'+v.wjob+'" style="width: 300px;text-align: center"><br>'
		    		        	+'员工薪资<input type="text" name="wsalary" autocomplete="off" class="layui-input" value="'+v.wsalary+'" style="width: 300px;text-align: center"><br>'
		    		        +'</div>'
		    		        
		    		      });

这是我的content采用传入字符串，拼接的表单效果

layer.open({
		        type: 1
		        ,title:'查看详情'  //标题
		        ,closeBtn: false
		        ,area: '400px;'
		        ,shade: false
		        ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
		        ,btn: ['确定','重置']
		        ,btnAlign: 'c'
		        ,moveType: 1 //拖拽模式，0或者1
		        ,content:$('#addw')
		        ,yes: function (index, layero) {//确定执行函数
		        	$.getJSON(ip+"/sy/worker_addWorker.action", {
	                   	 name: $("#name").val(),
	                   	 age:$('#age').val(),
	                   	 sex:$('#sex').val(),
	                   	 num:$('#num').val(),
	                   	 job:$('#job').val(),
	                   	 salary:$('#dalary').val()
					},function (res){
					var v = eval('(' + res + ')'); 
		    		if(v.code>0){
		    		layer.msg(v.msg)
		    		}else{
		    			layer.msg('添加失败！')
		    		}
		    		layer.close(index);
		    		table.reload('idTest', {//重载表格
	                     page: {
	                         curr: 1
	                     }
	                 })
				})
		        	
			        },cancel:function (index, layero) {//取消
	                    $("#addworker")[0].reset();//重置form  根据id
	                    layer.close(index);
	                }
		        
		        
		      });

这是我content采用DOM的方式，还有两个自定义按钮及其回调函数