在 MousePosition 中打开 JQuery Ui 对话框答案

【问题标题】：Opening JQuery Ui Dialog in MousePosition在 MousePosition 中打开 JQuery Ui 对话框
【发布时间】：2011-05-31 22:49:33
【问题描述】：

我想在鼠标位置打开 JQuery UI 对话框。我的代码有什么问题？

<script type="text/javascript">

    $(document).ready(function () {
        var x;
        var y;
        $(document).mousemove(function (e) {
            x = e.pageX;
            y = e.pageY;
        });

        $("#d").dialog({
            autoOpen: false,
            show: "blind",
            hide: "explode",
            position: [x, y]
        });
        $("#c").bind("mouseover", function () {
            $("#d").dialog('open'); // open
        });


        $("#c").bind("mouseleave", function () {
            $("#d").dialog('close'); // open
        });



    });



</script>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

Nick Craver 的答案有效，只需要改进，以使框始终靠近光标。

Y轴需要减去页面的scrollTop。所以那行变成：

$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] });

【讨论】：

【解决方案2】：

$("#d").dialog(
    "option", 
    {
        position: 
        {
            my: 'left', 
            at: 'right', 
            of: event
        }
    }
);

工作样本：http://jsbin.com/okosi4

当我有一个需要滚动的长页面时，这个解决方案对我来说效果更好。我发现上述解决方案不适用于垂直滚动。

查看更多关于position option

【讨论】：

我点击了“工作示例”链接，但它显示“免费预览时间已过期”
so... 复制粘贴内容到小提琴或类似的东西。

【解决方案3】：

在x 和y （按值）传递给setup 后更新对话框不会有任何效果，因为之后变量不再相关。您需要直接更新位置选项，如下所示：

$(document).mousemove(function (e) {
    $("#d").dialog("option", { position: [e.pageX, e.pageY] });
});

You can test it out here，或更优化的版本（因为无论如何你只在#c 上显示它）：

$(function () {
    $("#d").dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
    });
    $("#c").hover(function () {
        $("#d").dialog('open');
    }, function () {
        $("#d").dialog('close');
    }).mousemove(function (e) {
        $("#d").dialog("option", { position: [e.pageX+5, e.pageY+5] });
    });
});

You can test that version here.

【讨论】：