配置：
引入jquery ui：
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
引入对应的css:
<link type="text/css" rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.10.3.custom.css" />
ui插件弹出dialog的位置默认为页面中间，查看js源文件时发现，dialog内有一个position的属性。
$.widget( "ui.dialog", {
version: "1.10.3",
options: {
appendTo: "body",
autoOpen: true,
buttons: [],
closeOnEscape: true,
closeText: "close",
dialogClass: "",
draggable: true,
hide: null,
height: "auto",
maxHeight: null,
maxWidth: null,
minHeight: 150,
minWidth: 150,
modal: false,
position: {
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
if ( topOffset < 0 ) {
$( this ).css( "top", pos.top - topOffset );
}
}
},……
设定弹出框的位置，则在position内。my属性设定为center表示，纵向为页面高度的中间；at属性设定center表示横向为页面宽度的中间。注：若是iframe内，则是iframe的中间。可设置为"top"等字符串。
自定义弹出框的位置则可以设置using函数。
平时引用dialog函数主要是直接引用，设置几个必须变量：（弹出框的id为js_choose，按钮的class设置为js_choose）
$("#js_choose").dialog({
title:"人员信息",
autoOpen:false,
width:600,
modal: true
});
$(".js_choose").click(function(){
$("#js_choose").dialog("open");
});
若是要设置为据页面顶端的高度，则需要在定义dialogue的时候添加using函数：
$("#js_choose").dialog({
title:"人员信息",
autoOpen:false,
width:600,
modal: true,
using:function(){
$(this).css({
"position":"absolute",
"top":"200px" //设置弹出框距离是页面顶端下的200px
});
}
});
这样就粗略的定义了弹出框的高度了。
