配置：
引入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
});
}
});
這樣就粗略的定義了彈出框的高度了。