[JQ] jq.confirm 弹出层框架使用

jQuery-confirm 

易于使用和高度灵活!
一个 jQuery 插件, 提供了大量的功能, 如自动关闭, ajax 加载, 主题, 动画和更多。

官网地址：http://craftpip.github.io/jquery-confirm/

 

 

使用

导入css和js文件：

<link href="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script>
<script src="https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.js "></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.js"></script>

创建html按钮

	<div id="toolbar">
		<a class="waves-effect btn btn-info btn-sm" href="javascript:createAction();" ><i class="zmdi zmdi-plus"></i> 新增规则</a>
		<a class="waves-effect btn btn-warning btn-sm" href="javascript:updateAction();" ><i class="zmdi zmdi-edit"></i> 编辑规则</a>
		<a class="waves-effect btn btn-danger btn-sm" href="javascript:deleteAction();" ><i class="zmdi zmdi-delete"></i> 删除规则</a>
	</div>

js实现代码

// 编辑
function updateAction() {
	var rows = $table.bootstrapTable('getSelections');
	if (rows.length != 1) {
		$.confirm({
			title: false,
			content: '请选择一条记录！',
			autoClose: 'cancel|3000',
			backgroundDismiss: true,
			buttons: {
				cancel: {
					text: '取消',
					btnClass: 'waves-effect waves-button'
				}
			}
		});
	} else {
		$.confirm({
			type: 'blue',
			animationSpeed: 300,
			title: '编辑规则',
			content: addHtml(rows[0]),
			buttons: {
				confirm: {
					text: '确认',
					btnClass: 'waves-effect waves-button',
					action: function () {
						$.post('${pageContext.request.contextPath}/mode/clean/rulesUpdate',
							{'rulesName' : $("#rname").val(), 'rulesLevel' : $("#rlevel").val(),'rulesContent' : $("#rcontext").val(),
							'rulesCode' : $("#rcode").val(),'rulesSql' : $("#rsql").val(),'rulesDescribe' : $("#rdec").val(),
							'rulesValue' : $("#rvalue").val(),"rulesId":rows[0].id,"rulesOrder":rows[0].rulesOrder},
							function(data,stats){
								if("success"==stats){
									$table.bootstrapTable('refresh');
								}else{
									$.alter("操作异常")
								}
						});
					}
				},
				cancel: {
					text: '取消',
					btnClass: 'waves-effect waves-button'
				}
			}
		});
	}
}