Расположение диалогового окна jQuery UI

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

Ниже приводится то, что у меня есть. position.top рассчитывается как примерно 1200 или около того, что делает диалог значительно ниже остальной части содержимого на странице.

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

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

Спасибо!

Ответ 1

Ознакомьтесь с некоторыми плагинами jQuery для других реализаций диалога. Cluetip является полнофункциональным подключаемым модулем всплывающей подсказки/диалога. Четвертое демо похоже на то, что вы пытаетесь сделать (хотя я вижу, что у него нет точного положения позиционирования, которое вы ищете.)

Ответ 2

В качестве альтернативы вы можете использовать утилиту jQuery UI Position, например.

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

Ответ 3

Благодаря некоторым ответам выше, я экспериментировал и в конечном итоге обнаружил, что все, что вам нужно сделать, это отредактировать атрибут "позиция" в определении модального диалога:

position:['middle',20],

У JQuery не было проблем с "средним" текстом для горизонтального значения "X", и мой диалог появился в середине, 20 пикселей вниз.

Я сердце JQuery.

Ответ 4

Прочитав все ответы, это, наконец, помогло мне:

$(".mytext").mouseover(function() {
    var x = jQuery(this).position().left + jQuery(this).outerWidth();
    var y = jQuery(this).position().top - jQuery(document).scrollTop();
    jQuery("#dialog").dialog('option', 'position', [x,y]);
});

Ответ 5

Взяв Jaymin, например, шаг вперед, я придумал это для позиционирования элемента ui-dialog jQuery над элементом, который вы только что нажали (подумайте "пузырь речи" ):

$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );

Обратите внимание, что я "открываю" элемент ui-dialog перед вычислением относительных смещений по ширине и высоте. Это связано с тем, что jQuery не может оценивать внешнюю ширину() или outerHeight() без элемента интерфейса ui, который физически отображается на странице.

Просто не забудьте установить 'modal' в false в ваших настройках диалога, и вы должны быть a-OK.

Ответ 6

http://docs.jquery.com/UI/API/1.8/Dialog

Пример для фиксированного диалога в верхнем левом углу:

$("#dialogId").dialog({
    autoOpen: false,
    modal: false,
    draggable: false,
    height: "auto",
    width: "auto",
    resizable: false,
    position: [0,28],
    create: function (event) { $(event.target).parent().css('position', 'fixed');},
    open: function() {
        //$('#object').load...
    }
});

$("#dialogOpener").click(function() {
    $("#dialogId").dialog("open");
});

Ответ 7

Проверьте <!DOCTYPE html>

Я заметил, что если вы пропустите <!DOCTYPE html> из верхней части вашего HTML файла, это диалоговое окно будет показано в центре содержимого документа не внутри окна, даже если вы укажете позицию: {my: 'center', at: 'center', of: window}

EG: http://jsfiddle.net/npbx4561/ - Скопируйте содержимое из окна запуска и удалите DocType. Сохраните как HTML и запустите, чтобы увидеть проблему.

Ответ 8

$(".mytext").mouseover(function() {
   var width = 250;
   var height = 270;
   var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
   var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
   $("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}

Позиционирует диалог только под элементом. Я использовал функцию offset() только потому, что вычисляет позицию относительно верхнего левого угла браузера, но функция position() вычисляет позицию относительно родительского div или iframe, который является родителем элемента.

Ответ 9

вместо чистого jquery, я бы сделал:

$(".mytext").mouseover(function() {
    x= $(this).position().left - document.scrollLeft
    y= $(this).position().top - document.scrollTop
    $("#dialog").dialog('option', 'position', [y, x]);
}

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

Ответ 10

Чтобы поставить его прямо поверх элемента управления, вы можете использовать этот код:

    $("#dialog-edit").dialog({
...    
        position: { 
            my: 'top',
            at: 'top',
            of: $('#myControl')
        },

...
    });

Ответ 11

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

Ответ 12

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

Ответ 13

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

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

Ответ 14

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

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

Ответ 15

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

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');

   });

Ответ 16

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

Инициализировать диалог с помощью $("#dialog").dialog("option", "position", 'top')
Откройте его с помощью $(dialog).dialog("open");
Затем введите x и y отображаемого диалогового окна (не любой другой node документа!)

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]);

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

Ответ 17

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

Ответ 18

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

Ответ 19

Я попробовал много способов, чтобы мой диалог был сосредоточен на странице и увидел, что код:

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

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

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

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

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

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

Ответ 20

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

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

Ответ 21

Вы установили верхнее положение в стиле для отображения по центру, увидели, что код:

.ui-dialog {top: 100px! important;}

Этот стиль должен отображать диалоговое окно 100px ниже сверху.