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

　　　　　　});

　　　　}
　　});

　　这样就粗略的定义了弹出框的高度了。