帮助，受挫：仅使用jQuery UI对话框+；位置_Jquery_User Interface_Dialog_Position

帮助，受挫：仅使用jQuery UI对话框+；位置

jquery user-interface

帮助，受挫：仅使用jQuery UI对话框+；位置,jquery,user-interface,dialog,position,Jquery,User Interface,Dialog,Position,是否可以仅使用jQueryUI对话框和定位脚本（而不是其他插件或方法）相对于其触发器链接放置基于jQueryUI的对话框？我找不到可行的演示，这里引用的jensibits方法在IE8中似乎经常出现崩溃，我必须支持它一位编码同事让我在下面包含的javascript中走了这么远，但是以“var offset”开头的注释掉的部分只偏移了对话框中的内容，而不是对话框本身，并且似乎无助于将对话框定位在按钮下方。如图所示，该对话框将加载默认页面中心我真的非常感谢你在这方面的帮助。谢谢大家!--cg 打

是否可以仅使用jQueryUI对话框和定位脚本（而不是其他插件或方法）相对于其触发器链接放置基于jQueryUI的对话框？我找不到可行的演示，这里引用的jensibits方法在IE8中似乎经常出现崩溃，我必须支持它

一位编码同事让我在下面包含的javascript中走了这么远，但是以“var offset”开头的注释掉的部分只偏移了对话框中的内容，而不是对话框本身，并且似乎无助于将对话框定位在按钮下方。如图所示，该对话框将加载默认页面中心

我真的非常感谢你在这方面的帮助。谢谢大家!--cg


打开对话框
[对话内容]

从一位设计师同事那里获得了脱机帮助。下面是使用jQuery位置（my，at，of method at）相对于链接/按钮定位基于jQuery的对话框的解决方案。适用于主要浏览器，包括IE返回v7

<!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>

<style media="screen" type="text/css">
<!--
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif}
#page{min-width:780px;max-width:1260px;margin:12px auto}

/* 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/* color for illo purposes only */ url('[image]') 0 0 no-repeat}
.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"
    });

    function showDialog (e, $trigger, $dialog) {
        e.preventDefault();
        $dialog.dialog("option", "position", {
            my: "left top",
            at: "left bottom",
            of: $trigger
        });
        $dialog.dialog("open");
    };

    $("#opendialog01").click(function(e) {
        return showDialog (e, $(this), $("#dialog01") );
    });

});
-->
</script>

</body>
</html>


打开对话框
[对话内容]

为什么要嵌入两次UI js？CDN的缩小包已经包含核心、位置、对话框等。

<!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>

<style media="screen" type="text/css">
<!--
body{width:97%;margin:0 1.5%;font:13px/1.231 'Arial Unicode MS',Arial,Verdana,sans-serif}
#page{min-width:780px;max-width:1260px;margin:12px auto}

/* 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/* color for illo purposes only */ url('[image]') 0 0 no-repeat}
.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"
    });

    function showDialog (e, $trigger, $dialog) {
        e.preventDefault();
        $dialog.dialog("option", "position", {
            my: "left top",
            at: "left bottom",
            of: $trigger
        });
        $dialog.dialog("open");
    };

    $("#opendialog01").click(function(e) {
        return showDialog (e, $(this), $("#dialog01") );
    });

});
-->
</script>

</body>
</html>