【发布时间】：2011-07-25 16:32:43
【问题描述】：
是否可以仅使用 jQuery UI 对话框和位置脚本（而不是其他一些插件或方法）相对于其触发链接放置一个基于 jQuery UI 的对话框？我找不到可行的演示，而且这里引用的 Jensbits 方法在 IE8 中似乎经常崩溃，我必须支持。
一位编码同事在下面包含的 javascript 中让我走到了这一步，但是以“var offset”开头的注释掉的部分仅偏移了对话框中的 content，而不是对话框本身，并且似乎无助于将对话框定位在按钮下方。如图所示，对话框加载默认页面中心。
非常感谢您对此提供的任何帮助。谢谢！ --cg
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<!-- YUI3 reset only: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css">
<!-- JQuery CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- JQuery UI CDN -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<!-- JQuery UI scripts -->
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.dialog.js"></script>
<style media="screen" type="text/css">
<!--
/* styles for demo purposes only, do not copy */
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif !important}
strong{font-weight:bold}
a{color:#034ea2}
a:hover{color:#ff7600}
p{margin:0 0 1em}
#page{min-width:780px;max-width:1260px;margin:12px auto}
/* end demo styles */
/* dialog base */
.dialog.ui-dialog{overflow:hidden;border:1px solid #a2aaaf;-moz-box-shadow:0px 1px 3px #7c888f;-webkit-box-shadow:0px 1px 3px #7c888f;box-shadow:0px 1px 3px #a2aaaf;background:#ffffff}
.dialog .ui-dialog-titlebar{margin-bottom:6px;padding:4px 6px;border-bottom:1px solid #dadddf;background:#eceeef;font-size:11px;color:#455560}
.dialog .ui-dialog-title-dialog{float:left}
.dialog .ui-dialog-titlebar-close
{float:right;width:17px;height:17px;position:relative;top:-1px;text-indent:-9999px;background:orange}
.dialog .ui-dialog-titlebar-close:hover{background-position:0 -30px}
.dialog .ui-dialog-content{padding:4px 10px 8px}
-->
</style>
</head>
<body>
<div id="page">
<!-- dialog trigger -->
<button id="opendialog01">Open dialog</button>
</div>
<!-- dialog -->
<div class="dialog" id="dialog01" title="Test dialog">
<p>[dialog content]</p>
</div>
<!-- initialize dialog -->
<script type="text/javascript">
<!--
$.fx.speeds._default = 100;
$(function() {
$(".dialog").dialog({
autoOpen: false,
show: "blind",
hide: "blind",
width: 400,
modal: false,
draggable: false,
resizable: false,
dialogClass: "dialog"
});
var showDialog = function (e, $trigger, $dialog) {
e.preventDefault();
/*
var offset = $trigger.offset();
$dialog.position({
of: $trigger,
my: "left top",
at: "left bottom"
});
*/
$dialog.dialog("open");
return false;
};
$("#opendialog01").click(function(e) {
return showDialog( e, $(this), $("#dialog01") );
});
});
-->
</script>
</body>
</html>
【问题讨论】：
-
为什么要两次嵌入UI js？来自 CDN 的压缩包已经包含核心、位置、对话框等。
标签： jquery user-interface dialog position