jquery-ui插件彈出框dialog自定義網頁彈出位置

配置：

　　引入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

　　　　　　});

　　　　}
　　});

　　這樣就粗略的定義了彈出框的高度了。