<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<script type="text/javascript" src="dialog1.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<link href="dialog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#button2").click(function(){
new Dialog({type:'id',value:'form1'}).show();
});
});
</script>
</head>
<body>
<form id="form1">
姓名：<input type="text"/><br/>
密码：<input type="password"/><br/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").hide();
});
</script>
<a href="#" id="button2">添加用户</a>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<script type="text/javascript" src="dialog1.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<link href="dialog.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
$("#button2").click(function(){
new Dialog({type:'id',value:'form1'}).show();
});
});
</script>
</head>
<body>
<form id="form1">
姓名：<input type="text"/><br/>
密码：<input type="password"/><br/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").hide();
});
</script>
<a href="#" id="button2">添加用户</a>
</body>
</html>
下面代码的意思是，当你点击了登陆按钮后，弹出表单，让你填写表单的数据，serialize() 用来收集表格的数据 点击save按钮时 用ajax 异步通信 将数据发送到服务器 你可以在服务器端用 POST['name'] 接收数据 进行后续处理note：只有当用户点击登陆 表格才会弹出$("#dialog-form").dialog({
autoOpen:false,
height:300,
widht: 350,
modal:true,
buttons:{
"Save":function(){
var data = $("#form1").serialize();
$.ajax({
type: 'POST',
url: "ajax/ajaxhandler.php?action=login",
data: data,
success: function(msg){
$("#result").append("<p>Category has added.</p>").fadeOut(50000);
window.location.reload();
},
dataType:"text"
});
$( this ).dialog( "close" );
$("#result").fadeOut(7000);
},
"Cancel":function(){
$(this).dialog("close");
}
},
close: function() {
allFields.val( "" ).removeClass( "error" );
}
}); $("#login-button")
.button()
.click(function(){
$("form1").dialog("open");
});<div id="dialog-form" title="Create new user">
<form id="myForm">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="slug">Description</label>
<input type="text" name="slug" id="slug" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
<p class="validateTips">All form fields are required.</p><button id="login-button">登陆</button>
</div>