jquery_ui全教程之一(dialog的使用教程)

4、然后加入一个script标签对，在脚本写如下代码：$(function(){      $("#dialog").dialog();});打开你的页面看一下吧，如果没什么意外你会看到一个类似这样的对话框简单吧，这就是一个弹出层，其中div的title被当作了dialog的title,右上角有关闭的xx，右下角则可以拖拽改变大小这就是一个默认的dialog，虽然我们没有为它指定高度和宽度，但是它有默认的值，在我们没有设定情况下dialog默认会弹出在屏幕的中央，大小也是有默认值的，可以改变大小，显示关闭按钮，

5、这都是默认的样式，那么如果我们想自己定制一下dialog，不想让他这样显示该如何做？下面介绍一些属性和方法来改变一下这个dialog，用到的属性如下：autoOpen,modal,buttons，根据这些属性我们来定制一个不会自动打开(当点击按钮或者通过其他的事件来触发弹出dialog的事件)，并且带有遮罩(模式窗体)和按钮的dialogbuttons属性是一个复合属性，使用形式如下：buttons{ok:function(){点击按钮执行的事件},cancel:function(){点击按钮执行的事件}}

6、其中ok是按钮显示的文本，而function是点击按钮后执行的事件。注意，在ok和function之间有冒号:，虽然按钮可以为中文，比如:确定:function(){}这种形式，但是切记，在按钮文本和function之间的冒号一定是英文字符下的冒号，不要写成中文的全角冒号，否则会有错误。将刚才的js脚本替换为：$("#dialog-form").dialog({       autoOpen:false,        modal:true,       buttons:{              登录:

7、function(){                     alert("您点击了登录按钮");              }       }})//控制打开dialog的方法functionopen_dialog(){       $("#dialog-form").dialog("open");}这里的dialog将带有一个登录按钮。并且为带遮罩的模式窗体。默认不显示。所以我们需要在页面添加一个按钮，通过点击按钮来控制打开dialog

8、ick="open_dialog();"/>这样当点击这个按钮时会打开这个dialog.打开后的dialog如下图：可能有的人会说为什么这个显示的颜色和样式都第一个不一样呢？因为jQueryUI组件的皮肤都是可定制的，而不是一尘不变。可以根据需要选择自己喜欢的皮肤样式来使用，在jQueryUI的官方网站上有UI皮肤下载的，可以先预览皮肤的效果再下载，下载后只需要将当前项目中的CSS文件即可实现切换皮肤那么在dia