简介

  在 JavaScript 中有 alert()、confirm()、prompt() 这三个弹出框，而 layui 中有弹出层组件，对常用的弹出框进行了美化。

<link rel="stylesheet" type="text/css" href="../../../layui/css/layui.css" />
<script src="../../../layui/layui.all.js" type="text/javascript" charset="utf-8"></script>

alter() 方法

  和JavaScript中的alter()方法最大的不同在于，layui中的alter()方法不阻塞代码执行。

  JavaScript自带的alert()方法

  1. 普通信息框
  代码：

function alert1() {
	var layer = layui.layer;
	layer.alert("柚咖~");
}

  效果：

  2. 带图标的信息框
  代码：

function alert2() {
	var layer = layui.layer;
	layer.alert("柚咖~",{icon:0});
}

  效果：

  icon 的取值从0~6，图标依次是 ！、√、×、？、锁、哭脸、笑脸，超过6的图标都是！的图标。

  3. 带回调方法的信息框
  回调方法会在点击确定之后执行。

function alert3(){
	var layer = layui.layer;
	layer.alert("带回调方法的alert", function(index) {
		layer.alert(index);
	})
}

confirm()方法

  JavaScript自带的confirm()方法

  1. 普通的询问框

function confirm1() {
	var layer = layui.layer;
	layer.confirm("这是一个询问框？") 
}

  2. 带表情的询问框

function confirm2() {
	var layer = layui.layer;
	layer.confirm("这是带表情一个询问框？", {icon:6,title:"柚咖"});
}

  3. 带回调方法的询问框

function confirm3() {
	var layer = layui.layer;
	layer.confirm("这是带表情一个询问框？", {
		icon: 6,
		title: "柚咖"
	}, function(index) {
		layer.alert(index);
	});
}

  只会在点击确定之后执行回调方法，点击取消不会执行

prompt()方法

  JavaScript自带的prompt()

  1. 输入框

function prompt2() {
	var layer = layui.layer;
	layer.prompt({
		formType: 0, // 0是普通输入框，1是密码输入框，2是文本域输入框，默认值是0
		value:"柚咖", // 输入框初始值
		maxlength:10, // 可输入文本的最大长度
		title:"柚咖~"
	});
}

  2. 带回调方法的输入框
  只有在点击输入框的确定之后才会执行回调方法，点击取消则不会执行。

function prompt3() {
	var layer = layui.layer;
	layer.prompt(function(value, index, elem) {
		console.log(value); //得到value
		console.log(elem);
		layer.close(index);
	});
}

msg()方法

  msg()方法是信息提示，默认会在3秒后自动消失。
  1. 普通提示信息

function msg0() {
	var layer = layui.layer;
	layer.msg("这是一个提示信息");
}

  2. 带表情的提示信息

function msg1() {
	var layer = layui.layer;
	layer.msg("带表情的提示信息",{icon:6});
}

  3. 设置消失时间
  如果时间设置为0，表示不自动消失。

function msg2() {
	var layer = layui.layer;
	layer.msg("1秒后消失",{
		icon:6,
		time:1000
	});
}

  4. 带回调方法的信息提示
  回调方法会在提示信息消失之后执行。

function msg3() {
	var layer = layui.layer;
	layer.msg("带回调方法和表情的提示信息", {icon:6,time:2000},function(index){
		layer.msg("柚咖~");
	});
}

  5. 设置按钮
  提示框还可以设置按钮

function msg4() {
	var layer = layui.layer;
	layer.msg("设置按钮", {
		icon: 6,
		time: 0,
		btn:["柚咖1","柚咖2","柚咖3"],
		yes: function(index) {
			layer.alert("QAQ")
		},
		btn2: function(index) {
			layer.alert("T_T");
		},
		btn3: function(index) {
			layer.alert("T.T");
		}
	})
}

load() 方法

  load() 方法是后面会讲到的 open() 方法中参数 type:3 (加载层) 的深度定制，load() 并不需要传太多的参数。如果不喜欢默认的加载风格，可以修改 icon 参数(取值范围为0~2)，默认值是0。

需要注意的一点是 load() 默认是不会自动关闭的，因为一般会在ajax回调体中关闭它。

open() 方法

  open() 方法是弹出层的标准使用方法。前面讲到的alert()、confirm()、load()等方法都可以用open()来实现。
  语法规则：layer.load(icon, options)

var layer = layui.layer;
layer.load();// 默认风格的加载层，不会自动关闭
layer.load(1); // 使用icon为1的加载层，不会自动关闭
layer.load(2, {time: 1000}); // 使用icon为2的加载层，过1s之后关闭

function layer0() {
	var layer = layui.layer;
	layer.open({
		content:'open方法'
	})
}

  open() 方法可以通过参数来设置弹出层

type 参数

  type 参数是弹出层类型，layui 提供了5种类型的弹出层，可传入的值有：0（信息框，默认），1（页面层），2（iframe层），3（加载层），4（tips层）。

title 参数

  title 参数是弹出层标题，传入值的类型有String、Array、Boolean，默认的值是 “信息”。

1. 传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；
2. 如果需要自定义标题区域样式，可以传递[‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；
3. 如果不想显示标题栏，可以传递 false

function layer1() {
	var layer = layui.layer;
	layer.open({
		type: 0,
		title: ["弹出层标题","color:red"]
	})
}

content 参数

  content 参数是弹出层内容，可传入的值有 String、DOM、Array，默认的值是 空字串。

skin

  skin 参数是弹出层的皮肤，用于设置弹出层的样式，可以传递 layui 内置的样式类名，也可以传递自定义的样式类名，以此实现不同风格的定制。
  目前layer内置的skin有：layui-layer-lan，layui-layer-molv。
  内置skin：

function layer2() {
	var layer = layui.layer;
	layer.open({
		// skin: "layui-layer-lan",
		skin:"layui-layer-molv"
	})
}

  自定义skin：

/*css 代码*/
/*标题样式*/
body .demo-class .layui-layer-title{background:skyblue; color:green; border: none;}
/*按钮样式*/
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:blue;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:red;}

function layer2() {
	var layer = layui.layer;
	layer.open({
		skin:"demo-class"
	})
}

icon 参数

  icon 参数是信息层 (type: 0) 和加载层 (type: 3) 的私有参数。
  信息框默认不显示图标，如果想显示图标，可以传入0-6；如果是加载层，可以传入0-2。

  alert()、confirm()其实就是信息层，所以他们可以设置 icon参数。

  对于加载层来说，icon为0时的图标：

  icon为1时的图标：

  icon为2时的图标：

btn 参数

  btn 参数是设置弹出层按钮的参数，传入值的类型有 String 和 Array，默认值是 ‘确认’。

1. 当弹出层是信息层 (type: 0) 时，btn默认是一个确认按钮；
2. 其它层类型则默认不显示，加载层 (type: 3) 和tips层 (type: 4) 则无效。

1. 如果是想要自定义一个按钮时，可以用{btn: '按钮'}；
2. 如果想要定义多个按钮时，可以{btn: ['按钮1', '按钮2','按钮3',…]}，按钮1的回调是yes，而从按钮2开始，回调为btn2: function(){}，以此类推。

function layer4() {
	var layer = layui.layer;
	layer.open({
		type: 0,
		btn:["柚咖1","柚咖2","柚咖3"],
		yes: function(){
			layer.alert("答对了");
		},
		btn2: function() {
			layer.alert("hehe");
		},
		btn3: function() {
			layer.alert("haha");
		}
	})
}

closeBtn 参数

  layer提供了两种风格的关闭按钮，可通过配置1和2来展示，默认值是1，如果不想显示关闭按钮，可以使用 closeBtn: 0

function layer5() {
	var layer = layui.layer;
	layer.open({
		content: "柚咖~",
		closeBtn: 2
	})
}

shade 参数

  shade 参数设置的是弹出层外区域的阴影透明度，传入值的类型有String、Array、Boolean，默认值为 0.3，表示0.3透明度的黑色背景。

1. 如果想要改变透明度，可以使用 shade: "0.8"，定义的阴影就是透明度为0.8的阴影
2. 如果想要定义阴影颜色，可以使用 shade: ["0.4","blue"]，定义的阴影就是颜色为蓝色，透明度为0.4的阴影
3. 如果不想要阴影，可以使用 shade: false

function layer6() {
	var layer = layui.layer;
	layer.open({
		// shade: 0.8
		shade: ["0.4","blue"]
		// shade: false
	})
}

time 参数

  time 参数是设置弹出层自动关闭所需毫秒，默认值为0，表示不自动关闭。

anim 参数

  anim 参数设置的是弹出层弹出的动画，默认值是0，表示弹出时动画是平滑放大。

值	效果
anim:0	平滑放大(默认)
anim: 1	从上掉落
anim: 2	从最底部往上滑入
anim: 3	从左滑入
anim: 4	从左翻滚
anim: 5	渐显
anim: 6	抖动

maxmin 参数

  maxmin 参数设置弹出层是否可以最大化、最小化，默认值是 false，如果需要最大化、最小化，需要将 maxmin 参数设置为 true。

  maxmin 参数只对页面层和ifram层有效。