在MousePosition中打开JQuery Ui对话框 [英] Opening JQuery Ui Dialog in MousePosition

问题描述

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

i want to open JQuery UI Dialog In Mouse Position. what is the problem with my code?

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

推荐答案

将x和y(按值)传递给 setup 后，更新对话框效果，因为此后变量不相关.您需要像这样直接更新排名选项:

Updating x and y after they're passed (by value) to setup the dialog won't have any effect, since the variables aren't related after that. You'll need to update the position option directly, like this:

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

您可以在此处进行测试，或者进行更优化的版本(因为仅将其显示在#c顶部):

You can test it out here, or the much more optimized version (since you only show it on top of #c anyway):

$(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] });
    });
});

您可以在此处测试该版本.

这篇关于在MousePosition中打开JQuery Ui对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！