jQuery UI Dialog：Demo-1：入门

本文的目的在于循序渐进的学会 jQuery UI Dialog的使用。

Demo-1：入门

我们需要引入三个文件（可以从官网下载，在文章最后我会给出所有Demo实例的下载以及所需的文件）

<link rel="stylesheet" href="jquery-ui.css" />
<script src="jQuery-1.7.2.min.js"></script>
<script src="jquery-ui-1.9.2.custom.min.js"></script>

（要是再准备两张图片那就更好了）

 

在页面中写一个Dome：

<div >
我们的内容
</div>

存放我们要弹出的内容。

再写一段js初始化一下：

 1 <script>
 2         function openDialog(){
 3             $('#myContent').dialog(
 4                 {
 5                     title:'自定义Title',
 6                     modal: true,//是否遮挡后面的元素
 7                     resizable:true, //是否可以改变大小
 8                     draggable:false,//是否可以拖拽
 9                     create:function(){
10                         //弹出的时候初始化，可以传一些参数进去，也可以绑定弹出框中元素的一些事件
11                         alert('初始化');
12                     },
13                     buttons:[
14                     {
15                         text:"确定",
16                         click:function(){
17                             alert('点击确定');
18                             $(this).dialog( "close" )
19                         }
20                     },
21                     {
22                         text:"取消",
23                         click:function(){
24                             alert('点击取消');
25                             $(this).dialog( "close" )
26                         }
27                     }
28                     ]
29                 }
30             );
31         }
32     </script>

为了测试我们再添加一个触发的按钮：

<input type="button" onclick="openDialog()" value="显示内容" />

好了就有一个具备基本功能的对话框了：

 实例下载地址：http://pan.baidu.com/share/link?shareid=221501&uk=3858966269