JQuery UI之Dialog对话框应用
文章来源：http://lwlfree.cn/?p=208
?
最近做应用重构，其中一个页面用层来作为辅助页面完成功能，但是由于主页面非常之大，之前的层定位不准导致可用性降低，故有此文。
?
想到前端，就想到了JQuery及其UI，前一段用了TAB功能，感觉不错。遂想体验其他控件。
这次使用的是Dialog。
?
JQuery UI 版本：1.7.2: jQuery 1.3+
?
查到的资料是需要引用：
依靠组件：
UI Core
Draggable
Resizable
bgiframe?
?
实际引用:
<link type=”text/css” href=”../Js/JQuery_UI/themes/base/ui.all.css” rel=”stylesheet” /><script type=”text/javascript” src=”../Js/JQuery_UI/jquery-1.3.2.js”></script><script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.core.js”></script><script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.draggable.js”></script><script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.resizable.js”></script><script type=”text/javascript” src=”../Js/JQuery_UI/ui/ui.dialog.js”></script><script type=”text/javascript” src=”../Js/JQuery_UI/external/bgiframe/jquery.bgiframe.js”></script>?
初始化：
$(function() { $(“#floater”).dialog({ bgiframe: true, //使用 bgiframe 插件解决 IE6 下无法遮盖 select 元素问题 modal: false, //不使用窗口模式，即：页面上其它元素将不会被覆盖且可以响应用户操作 autoOpen: false //不自动打开，即：页面加载完毕后不显示Dialog窗体，这个是为了让用户需要的时候才显示所准备的。 }); });?关键性代码：
var top = $(obj).offset().top + 16;var left = $(obj).offset().left – 290;$(“#floater”).dialog(“option”, “position”, [left, top]);$(“#floater”).dialog(“open”);?
这几句是写在用户需要时触发Dialog窗体的函数体内部的，为了解决弹出层定位问题，使用了这三句：
var top = $(obj).offset().top + 16; //obj是用户触发的元素对象，这里要取obj的top值，这里的语法是必须在JQuery框架加载后使用，下同。var left = $(obj).offset().left – 290; //这里要取obj的left值，为了不遮盖住用户触发的元素，因此有一定的偏移量，如：+ 16 ，- 290。$(“#floater”).dialog(“option”, “position”, [left, top]); //设置弹出层的位置。?
这样设置完毕后，弹出层就会出现在用户鼠标点击的元素左下方，方便用户使用。
剩下的就是控制Dialog窗体是否显示的代码了，如下：
$(“#floater”).dialog(“open”);$(“#floater”).dialog(“close”);?
最后就是关于弹出层内容问题了，大家可以看到$(“#floater”)
这里的floater即弹出层的ID，用法如下：
<div id=”floater”>这里放置弹出层显示的内容</div>?
?