早就知道有JQuery UI这个东西，但是一直没去看过，只是看过他的特效，当时感觉很棒！今天去看了下，顺便也做了个测试再次感觉很强大

首先引入一个CSS跟两个js库，

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 

这些资源是google提供的，去JQuery官方下载也可以

 

 

 1 <script type="text/javascript">
 2         $(document).ready(function() {
 3             $('#btn').button({
 4                 label: "测试"
 5             }).click(function() {
 6                 $('#dialog').dialog('open');
 7             })
 8             $('#dialog').dialog({
 9                 buttons: {//按钮，两个按钮，名字一个是关闭，一个是提交，在各自的函数中做自己的是，触发是单机。
10                     "关闭": function() {
11                         $('#dialog').dialog('close');
12                     },
13                     "提交": function() {
14                         $('#dialog').html("测试");
15                     }
16                 },
17                 title: "注册账号",//弹出
18                 resizable: false,
19                 show: 'explode',
20                 hide: 'explode',
21                 autoOpen: false
22             });
23         })
24     </script>

 

html代码就非常简单

 

1 <body>
2     <div id="dialog">
3     </div>
4     <button id="btn">
5     </button>
6 </body>

 

 

Demo：http://www.cnblogs.com/cclovezm   最上面！！！！！！！