Открытие диалога JQuery Ui в MousePosition - PullRequest
Новая
       3

Открытие диалога JQuery Ui в MousePosition

11 голосов
/ 29 декабря 2010

Я хочу открыть диалог 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>

Ответы [ 3 ]

15 голосов
/ 29 декабря 2010

Обновление 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] });
    });
});

Вы можете проверить эту версию здесь .

9 голосов
/ 21 февраля 2012

Ответ Ника Крейвера работает, нужно только улучшить, чтобы поле всегда было рядом с курсором.

По оси прокрутки страницы нужно вычесть ось Y.Таким образом, эта строка становится: 

$("#d").dialog("option", { position: [e.pageX+5, (e.pageY+5)-$(document).scrollTop()] });
5 голосов
/ 30 июля 2013 
$("#d").dialog(
    "option", 
    {
        position: 
        {
            my: 'left', 
            at: 'right', 
            of: event
        }
    }
);

Рабочий образец: http://jsbin.com/okosi4

Это решение работало лучше для меня, когда у меня была длинная страница, требующая прокрутки.Я обнаружил, что вышеупомянутые решения не очень хорошо работают с вертикальной прокруткой.

Подробнее о опция положения

...