<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/jscript" src="./js/jquery-1.7.1.min.js" /></script>
<script language="javascript" type="text/jscript" src="./js/jquery-ui-1.8.18.custom.min.js" /></script>
<link rel="stylesheet" href="./css/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" href="./css/demo.css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#dialog").dialog({
autoOpen:false, //设置对话框打开方式,不是自动打开
show:"blind", //打开时的动画效果
hide:"explode", //关闭时的动画效果
modal:true, //是否遮罩,true表示遮罩效果,false表示非遮罩
draggable:false, //是否可以拖动效果 默认值true表示可以拖动默认值false表示不可拖动
closeOnEscape:false, //是否采用esc键退出对话框,如果false表示不采用,默认值true表示采用
title:"添加用户", //对话框的标题
position:"center", //对话框弹出位置 top bottom center left right 默认值为center
width:400, //对话框宽度
height:250, //对话框高度
resizable:false, //是否可以改变的操作 如果为false表示不可改变大小 默认值为true表示可以改变大小
buttons:
[{
text:"确定",
click:function (){
//点击确定之后获取表单输入的值
var textval=$("#name").val();
var sexval=$("#sex").val();
var ageval=$("#age").val();
var telval=$("#tel").val();
//向表格中添加用户
$("#users")
.append("<tr align='center'><td>"+textval+"</td><td>"+sexval+"</td><td>"+ageval+"</td><td>"+telval+"</td><td><a href='#' id='del'>删除</a></td></tr>");
//删除当前行
$("td a").click(function (){
$(this).parents("tr").remove();
});
//关闭对话框
$(this).dialog("close");
}
},
{
text:"取消",
click:function (){
$(this).dialog("close");
}
}],
});
//触发连接的事件 当你点击 连接打开一个对话框
$("#dialog_link").click(function (){
$("#dialog").dialog("open");//open参数, 作用是打开对话框
});
});
</script>
<style>
#dialog_link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;}
#dialog_link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;}
</style>
<style>
body { font-size: 10px; }
label, input { display:block; }
input.text { margin-bottom:12px; width:90%; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: center; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
</head>
<body>
<table width="298" height="36" border="0" id="users" class="ui-widget ui-widget-content">
<h3>用户列表:</h3>
<tr class="ui-widget-header " align="center">
<td width="48">姓名</td>
<td width="48">性别</td>
<td width="48">年龄</td>
<td width="57">电话</td>
<td width="63">操作</td>
</tr>
</table>
<br><br><br><br>
<a href="#" id="dialog_link" class="ui-state-default ui-corner-all">添加用户</a>
<div id="dialog" title="添加用户">
姓名:<input type="text" id="name" /><br>
性别:<input type="text" id="sex" /><br>
年龄:<input type="text" id="age" /><br>
电话:<input type="text" id="tel" /><br>
</div>
</body>
</html>
效果: