修改confirm样式

修改confirm样式

我是怎样修改的confirm的样式

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

需求

在点这个红叉的时候删除掉一行数据 并且在删除前提示要被删除的那一行的名称
原来的弹出框方式非常丑 是这样的

table代码

<table class="table  table-bordered">
	<thead>
		<tr>
			<th width="30">#</th>
			<th width="30"><input type="checkbox"></th>
			<th>名称</th>
			<th width="100">操作</th>
		</tr>
	</thead>
<tbody>
	<c:forEach var="role" items="${pageInfo.list}" varStatus="varStatus">
		<tr>
			<td>${varStatus.index+1}</td>
			<td><input id="roleId" name="check" type="checkbox"
			value="${role.id}"></td>
			<td>${role.name}</td>
                   <td>
				<button type="button" class="btn btn-success btn-xs">
				</button> <!-- 修改 -->
				<button type="button" class="btn btn-primary btn-xs">
					<i class=" glyphicon glyphicon-pencil"></i>
				</button>

				<button id="confirm" type="button"
					class="btn btn-danger btn-xs">
					<i class=" glyphicon glyphicon-remove"></i>
				</button>
				</td>
				<td class="hidden">${role.id}</td>
				</tr>
				</c:forEach>
</tbody> 

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

步骤

1. 去官网下插件 https://jqueryui.com/
   
   这两个随便选一个

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,这就是弹出框的显示提示内容的部分,是怎么隐藏的我也不知道

<div id="dialog" title="Dialog Title">
	<p>确定删除这条数据吗?</p>
</div>

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");
				}
			} ]
		});

这样就完成了

点击确定

删除成功