不喜欢搞jquery UI的demo，原因就是他要搞好些个js引进入，难道没有一个整合体么？乌鸦猜是有的，要不然引入这么JS对性能也是一个影响，jq UI的开发团队不可能想不到的。

这是一个dialog 的demo，在弹出的dialog中填写信息后返回父页面，感觉这种父子页面交互信息的dialog用的可能会多，所以直接做了一个这样的demo，在官网还有其他类型的dialog，具体可以参照其官网。

以下代码直接拷贝出来运行不了，请自行添加相关的JS。

[code=php]
<html>
<head>
<meta charset="gbk">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.7.2.js"></script>

<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>

<style type="text/css">
body{
font-size:14px;
}
</style>

<script>
$(function() {

$( "#dialog-form" ).dialog({
autoOpen: false,
height: 700,
width: 750,
modal: true,
buttons: {//这个参数是在弹出的dialog添加按钮，并增加点击按钮执行的方法
"确认": function() {

//在弹出的 dialog 点击确认以后的主体业务代码
var name = $("#name").val();
var email = $("#email").val();
var pwd = $("#password").val();
var showMsg = $("#showMsg");
showMsg.html(showMsg.html()+"name:"+name+",email:"+email+",password:"+pwd+"<br/>");

$( this ).dialog( "close" );//如果成功以后，关闭当前 dialog

},
"关闭": function() {
$( this ).dialog( "close" );
},
"哈哈": function(){
alert("乌鸦要关闭这个dialog");
}
},
close: function() {
//关闭以后执行的方法
alert('关闭啦~~');
}
});

$( "#create-user" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
</script>
</head>
<body>

<div class="demoasd">
<div id="dialog-form" title="add msg">
Name：<input type="text" name="name" id="name" /><br/>
Email：<input type="text" name="email" id="email" value="" /><br/>
Password：<input type="password" name="password" id="password" value="" />
</div>
<div id="showMsg">
乌鸦在dialog里填写的信息是<br/>
</div>
<br/>
<button id="create-user">open the dialog</button>
</div>

</body>
</html>
[/code]


更多文章请访问：wang153723482.blog.163.com