Layui 询问弹层与输入弹层的配合使用

1、目标效果

• 对某一个提交的信息进行审核，审核结果为通过或拒绝。
• 通过时，提示信息通过。
• 拒绝时，提示信息拒绝，并填写拒绝理由。

2、在你的页面中引入 layui

点击前往 layui 官网

3、代码实现

// 定义点击按钮并绑定事件
$('#forbidden').on('click', function () {
	// 按钮添加禁用属性，防止重复点击
	$('.layui-btn').addClass('layui-disabled').attr('disabled','disabled');
	// 打开询问弹层
	layer.confirm(
		'确定拒绝通过审核吗？',
		// 询问弹层确定按钮回调
		function () {
		// 打开输入弹层
		layer.prompt({
			formType: 2, // 输入框类型，0-文本、1-密码（默认）、2-多行文本
			value: '', // 初始时的值，默认空字符
			title: '请输入原因', // 弹框标题
			area: ['300px', '150px'] // 自定义文本域宽高
		}, function (value, index, elem) { // 输入弹层确定按钮回调
			layer.close(index); // 关闭输入层
			alert(value);
			// 或执行其他操作
		});
	}, function () { // 询问弹层取消按钮回调
		location.reload(); // 点击打开询问弹层时添加了禁用属性，当点击取消时刷新页面重置按钮属性到可用状态
	});
});