修改confirm样式

修改confirm样式

我是怎样修改的confirm的样式

实际上我并没有修改conform的样式 而是采用的jquery-ui的dialog插件

需求
修改confirm样式_第1张图片

在点这个红叉的时候删除掉一行数据 并且在删除前提示要被删除的那一行的名称
原来的弹出框方式非常丑 是这样的
修改confirm样式_第2张图片
table代码


		

jsp 页面 第三个button为删除
原本这里可以直接加一个confirm 把结果进行判断 ,为true 就进行跳转,把要删除的id带上 ,但是太丑了 我就用了插件 可以做成这样的效果

修改confirm样式_第3张图片

步骤

  1. 去官网下插件 https://jqueryui.com/
    修改confirm样式_第4张图片
    这两个随便选一个

2.导入项目 需要导入最少3个东西
jquery-2.1.1.min.js 这是自己以前准备的jquery文件
jquery-ui.css jquery-ui的css
jquery-ui.js jquery-ui的js
自己最好先建个demo试一下能不能用

3.在body的底部添加这样一个div,这就是弹出框的显示提示内容的部分,是怎么隐藏的我也不知道
修改confirm样式_第5张图片

确定删除这条数据吗?

4.为button添加点击事件 以下是参考插件jquery-ui框架中的index页面的 dialog 进行修改的
script代码块

$("tbody .btn-danger").click(
				function(event) {
					//获取角色名
					var roleNameString = $(this).parent().parent().find(
							"td:eq(2)").text();
					$(this).parent().parent().find("td:eq(2)").addClass(
							"clicked");
					//改变p的内容
					var warning = '确认删除 "' + roleNameString + '" 这条数据';
					document.getElementById("dialog").innerText = warning;	
					//原本这里可以直接加一个confirm  把结果进行判断  
					//为true 就进行跳转,把要删除的id带上  ,但是太丑了  我就用了插件
					
				    //操作插件  直接copy的index页面的
					$("#dialog").dialog("open");
					event.preventDefault();

				});

5.修改弹出框点击确定之后进行的操作 参考插件jquery-ui框架中的index页面

//删除操作
$("#dialog").dialog({
                  //修改提示标题
			title : "提示",
			autoOpen : false,
			width : 400,
			buttons : [ {
				text : "确定",
				click : function() {
                    	//获取那一行的id
				var roleId =  $(".clicked").parent().find("td:eq(1) input").prop("value");
    		       //去服务器进行删除操作
                           window.location.href = "${ctp}/permission/role/delete?id="
                            + roleId;
				$(this).dialog("close");
				}
			}, {
				text : "取消",
				click : function() {
					$(this).dialog("close");
				}
			} ]
		});

这样就完成了
修改confirm样式_第6张图片
点击确定
修改confirm样式_第7张图片

删除成功

你可能感兴趣的:(技术实现)

# 名称 操作
${varStatus.index+1} ${role.name}