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(); // 點擊打開詢問彈層時添加了禁用屬性，當點擊取消時刷新頁面重置按鈕屬性到可用狀態
	});
});