js中使用layer制作弹出层

layer弹出层框架alert与msg

layer—>web弹层组件

a、layer.alert

layer.alert('墨绿风格，点击确认看深蓝', {
	skin: 'layui-layer-molv' ,   //样式类名  自定义样式
	closeBtn: 1  ,  // 是否显示关闭按钮
	anim: 1 ,//动画类型
	btn: ['重要','奇葩'], //按钮
	icon: 6 ,  // icon,左边图标样式
	yes:function(){
		layer.msg('按钮1')
	},
    btn2:function(){
		layer.msg('按钮2')
	}
});

layer.alert('见到你真的很高兴', {icon: 6});

b、layer.msg

layer.msg('也可以这样', {
	btn: ['明白了', '知道了'],
	yes: function(index, layero){
		layer.msg("按钮1回调,参数是:"+index)
	},
	btn2: function(index, layero){
		//按钮【按钮二】的回调
		layer.msg("按钮2回调,参数是:"+index)
		return false //开启该代码可禁止点击该按钮关闭
	}
});

示例：

if (unitNumber == '') {
		 inputTips('请输入单元号', 'unitNumber', false);
		return false;
}else if(unitNumber == '0'){
		var index = layer.alert('无单元情况，单元号填写1并做好备注！', {
		skin: 'layui-layer-molv',
		btn: ['自动填写','手动填写'],
		icon: 0,
		btn1:function(){
			$("#unitNumber").val('1');
			var desc = $("#desc").val();
			if (desc == '') {
				$("#desc").val('无单元');
				layer.close(index);
			}else {
				desc = desc + '(无单元)';
				$("#desc").val(desc);
				layer.close(index);
			}
		},
		btn2:function(){
			$("#unitNumber").val('');
			layer.close(index);
		}
	});
	return false;
}

常用的icon样式：