jquery-dialog

dialog
去掉"×"关闭
.no-close .ui-dialog-titlebar-close {
display: none;
}

$("#dialog").dialog({
dialogClass:'no-close',
buttons:[
{
text:'ok',
click:function(){
$(this).dialog('close');
}
}]
})

OPTIONS(选项)

appendTo
//对话框（和叠加，如果是模态）应该附加到哪个元素。
$( ".selector" ).dialog({
appendTo: "#someElem"
});
$(".selector").dialog("option","appendTo","#someElem");

autoOpen(true)
设为true 弹出框在初始化就会打开
$( ".selector" ).dialog({
autoOpen: false
});

buttons (Object or Array)
指定弹出页面显示的按钮
$( ".selector" ).dialog({
buttons: [
{
text: "Ok",
icon: "ui-icon-heart",
click: function() {
$( this ).dialog( "close" );
}
}
]
});

classes object
指定要添加到小部件的其它类
default:
{
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all",
}
例如
$(".selector").dialog({
classes:{"ui-dialog": "highlight"}
})

closeOnEscape(true)
指定对话框在焦点并且用户按下ESC（退出）键时是否应该关闭
$(".selector").dialog({
closeOnEscape:false
})

closeText (close)
指定关闭按钮的文本。 请注意，在使用标准主题时，关闭文本显然是隐藏的。
$(".selector").dialog({
closeText:"关闭"
})

dialogClass
指定的类名将被添加到对话框中，以进行其他主题。
$( ".selector" ).dialog({
dialogClass: "alert"
});

draggable (true)
能否拖动弹出框
$( ".selector" ).dialog({
draggable: false
});

height(auto)
指定弹出框的高度
$( ".selector" ).dialog({
height: 400
});

hide
Boolean or Number or String or Object
关闭弹出框
Boolean 设置false 不使用动画 立即关闭 true 使用默认的动画时间
Number 按指定的时间淡化关闭弹出框
String 已插件已有的效果淡化 如slideUp 或者 fold
Object 自定义淡化效果

maxHeight maxWidth minHeight minWidth
//最大高度 //最大宽度

modal(false)
如果设置为true，对话框将具有模态行为; 页面上的其他项目将被禁用，
即不能与之交互。 模式对话框在对话框下方但在其他页面元素上方创建叠加层。

position
弹出框的位置
$( ".selector" ).dialog({
position: { my: "left top", at: "left bottom", of: button }
});

resizable(true)
true弹出框自动调节大小

show
打开弹出框 和hide相同
$( ".selector" ).dialog({
show: { effect: "blind", duration: 800 }
});

title
标题
$( ".selector" ).dialog({
title: "Dialog Title"
});

width
弹出框宽度

Methods

close()
关闭弹出框
$( ".selector" ).dialog( "close" );

destroy()
$( ".selector" ).dialog( "destroy" );
彻底删除弹出框

instance()
检索对话框的实例对象。 如果元素没有关联的实例，则返回undefined。

moveToTop()
将对话框移到对话框的顶部
$( ".selector" ).dialog( "moveToTop" );

open()
打开弹出框
$( ".selector" ).dialog( "open" );

option( optionName )
获取当前与指定的optionName关联的值
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
var options = $( ".selector" ).dialog( "option" ); 获取所有

option( optionName, value )
设置与指定的optionName关联的对话框选项的值。
$( ".selector" ).dialog( "option", "disabled", true );
$( ".selector" ).dialog( "option", { disabled: true } );

EVENTS
beforeClose( event, ui )
当对话即将关闭时触发。 如果取消，对话框将不会关闭
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});

close( event, ui )
关闭对话框时触发
$( ".selector" ).dialog({
close: function( event, ui ) {}
});
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );

create( event, ui )
创建对话框时触发
$( ".selector" ).dialog({
create: function( event, ui ) {}
});

drag( event, ui )
拖动对话框时触发
$( ".selector" ).dialog({
drag: function( event, ui ) {}
});

dragStart( event, ui )

dragStop( event, ui )

focus( event, ui )
当对话获得焦点时触发。
$( ".selector" ).dialog({
focus: function( event, ui ) {}
});

open( event, ui )
弹出框在打开时触发
$( ".selector" ).dialog({
open: function( event, ui ) {}
});

resize( event, ui )
触发对话框的大小触发

当用户开始调整对话框大小时触发。
resizeStart( event, ui )
resizeStop( event, ui )

//完全清除 弹出内容
main.html

main.js
$("#id").click(function(){
$("#content").load("../dialog.html")
})

dialog.html

.......