JQuery UI диалог позиционирования

Question

Я пытаюсь использовать библиотеку jQuery dialog UI , чтобы расположить диалоговое окно рядом с текстом, когда он находится над ним. Диалог jQuery принимает параметр позиции, который измеряется в верхнем левом углу текущего видового экрана (другими словами, [0, 0] всегда будет помещать его в верхний левый угол окна браузера, независимо от того, где вы в данный момент прокручиваете ). Тем не менее, единственный известный мне способ получения местоположения - это элемент относительно ВСЕЙ страницы.

Вот то, что у меня есть в настоящее время. position.top рассчитывается как что-то вроде 1200 или около того, что ставит диалоговое окно намного ниже остального содержимого на странице.

$(".mytext").mouseover(function() {
    position = $(this).position();
    $("#dialog").dialog('option', 'position', [position.top, position.left]);
}

Как мне найти правильную позицию?

Спасибо!

Answer 1

Эта страница показывает, как определить смещение прокрутки. У jQuery может быть похожая функциональность, но я не смог ее найти. Используя функцию getScrollXY, показанную на странице, вы сможете вычесть координаты x и y из результатов .position ().

Answer 2

немного поздно, но вы можете сделать это сейчас, используя $ j (object) .offset (). Left и .top соответственно.

Answer 3

Я не думаю, что речевой пузырь совершенно прав. Я немного подправил его, чтобы он работал, и элемент открывается прямо по ссылке.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}

Answer 4

Вот код .., как поместить диалоговое окно jQuery UI в центр ......

var $about = $("#about");

   $("#about_button").click(function() {
      $about.dialog({
         modal: true,
         title: "About the calendar",
         width: 600,         
         close: function() {
            $about.dialog("destroy");
            $about.hide();
         },
         buttons: {
            close : function() {
               $about.dialog("close");
            }
         }
      }).show();

      $about.dialog("option", "position", 'center');

   });

Answer 5

Чтобы зафиксировать центральное положение, я использую:

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}

Answer 6

$("#myid").dialog({height:"auto",
        width:"auto",
        show: {effect: 'fade', speed: 1000},
        hide: {effect: 'fade', speed: 1000},
        open: function( event, ui ) {
          $("#myid").closest("div[role='dialog']").css({top:100,left:100});              
         }
    });

Answer 7

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

1. Инициализировать диалог с помощью $("#dialog").dialog("option", "position", 'top')
2. Откройте его с помощью $(dialog).dialog("open");

3. Затем получите x и y отображаемого диалогового окна (не любой другой узел документа!)

   var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;

   var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;

   $(dialog).dialog('option', 'position', [xcoord , ycoord]);

Таким образом, координаты взяты из диалога, а не из документа, и позиция изменяется в соответствии со слоем диалога.

Answer 8

выше решения очень верны ... но диалог пользовательского интерфейса не сохраняет позицию после изменения размера окна. код ниже делает это

            $(document).ready(function(){

                $(".test").click(function(){
                            var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                            var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
                            console.log("in click function");
                            $(".abc").dialog({
                                position:[posX,posY]
                            });

                        })

            })

            $(window).resize(function(){
                var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
                var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();

            $(".abc").dialog({
                                position:[posX,posY]
                            });
            })

Answer 9

вы можете использовать $(this).offset(), позиция связана с родителем

Answer 10

Я пытался по-разному расположить диалог на странице и увидел код:

$("#dialog").dialog("option", "position", 'top')

никогда не меняйте позицию диалога, когда она была создана.

Вместо этого я изменяю уровень селектора, чтобы получить весь диалог.

$("#dialog").parent() <- это родительский объект, который создается функцией dialog () в DOM, потому что селектор $ ("# dialog") не применяет атрибуты, вверху, слева. </p>

Для центрирования моего диалога я использую jQuery-Client-Centering-Plugin

..

$ ( "# Диалог") родителя () centerInClient ();