在鼠标位置打开JQuery Ui对话框

Question

我想在鼠标位置打开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>

- Shahin

Answer 1

在将x和y（按值传递）传递给setup对话框后更新它们，不会产生任何效果，因为变量之间没有关联。你需要直接更新位置选项，像这样：

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

您可以在此处进行测试，或者使用更优化的版本（因为您只在#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] });
    });
});

你可以在这里测试那个版本。

- Nick Craver

---

无法工作。它离鼠标指针不近，位于屏幕中间的某个地方。 - undefined

Answer 2

尼克·克雷弗（Nick Craver）的答案是正确的，只需要进行改进，以便该框始终靠近光标。

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

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

- Toninho

Answer 3

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

示例代码：http://jsbin.com/okosi4

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

了解更多关于位置选项

- Bob

---

我按照“工作示例”链接进行操作，但它显示“免费预览时间已过期”。 - B. Clay Shannon-B. Crow Raven

所以...将内容复制粘贴到Fiddle或类似的工具中。 - Kevin B