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

叁歲伎倆 2022-01-25 15:35 171阅读 0赞

### jQuery-confirm  ###

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

官网地址：[http://craftpip.github.io/jquery-confirm/][http_craftpip.github.io_jquery-confirm]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70][]

### 使用 ###

导入css和js文件：

创建html按钮

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'
    				}
    			}
    		});
    	}
    }

[http_craftpip.github.io_jquery-confirm]: http://craftpip.github.io/jquery-confirm/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDkwMjUyNw_size_16_color_FFFFFF_t_70]: /images/20220125/f76b71c322b24e9bb37e46193a33a12d.png