jQuery UI Dialog：Demo1：入门

本文的目的在于循序渐进的学会 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 id="myContent" style="100px; height: 100px; background: #00F;">
我们的内容
</div>

存放我们要弹出的内容。

再写一段js初始化一下：

<script>
        function openDialog(){
            $('#myContent').dialog(
                {
                    title:'自定义Title',
                    modal: true,//是否遮挡后面的元素
                    resizable:true, //是否可以改变大小
                    draggable:false,//是否可以拖拽
                    create:function(){
                        //弹出的时候初始化，可以传一些参数进去，也可以绑定弹出框中元素的一些事件
                        alert('初始化');
                    },
                    buttons:[
                    {
                        text:"确定",
                        click:function(){
                            alert('点击确定');
                            $(this).dialog( "close" )
                        }
                    },
                    {
                        text:"取消",
                        click:function(){
                            alert('点击取消');
                            $(this).dialog( "close" )
                        }
                    }
                    ]
                }
            );
        }
    </script>

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

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

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

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