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

109

Я пытаюсь использовать библиотеку 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
    Начиная с версии 1.9 имеется встроенный виджет всплывающей подсказки.
Теги:

21 ответ

13
Лучший ответ

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

Поделиться
  • 1
    jfyi, «подсказка» больше не работает.
100

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
Поделиться
  • 29
    Это лучший подход. Я отмечу, однако, что если вы создаете диалог в первый раз, вам понадобится дополнительный вызов dialog например: $('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
  • 26
    Утилита позиционирования пользовательского интерфейса jQuery не работает со скрытыми элементами, поэтому вам нужно открыть диалоговое окно, прежде чем размещать его с этим кодом.
Показать ещё 2 комментария
80

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

position:['middle',20],

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

Я сердце JQuery.

Поделиться
  • 0
    Работает без каких-либо дополнительных плагинов и интуитивно понятен. Лучшее решение, которое я видел.
  • 0
    Фантастически простое решение, без дополнительных плагинов. Это должен быть принятый ответ.
Показать ещё 3 комментария
42

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

$(".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]);
});
Поделиться
  • 0
    Этот ответ сработал для меня и сэкономил мне, вероятно, много минут / часов поисков того, как настроить другие решения. Спасибо!
  • 1
    +1 Мне очень помогло, когда я понял .position () дает относительную позицию, а .offset () - абсолютную позицию (что мне нужно)
Показать ещё 1 комментарий
16

Взяв 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.

Поделиться
  • 1
    Я думаю, что ваши две переменные должны быть myDialogX и myDialogY
  • 0
    Ты прав; Я исправил это сейчас.
15

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");
});
Поделиться
10

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

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

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

Поделиться
  • 2
    Это была именно та проблема, которая у меня была, и это исправило ее.
  • 1
    Моему xml-преобразованию не удалось добавить тип документа, этот ответ вместе со: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt заставил меня работать.
Показать ещё 1 комментарий
7 
$(".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, который является родителем элемента.

Поделиться
6

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

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

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

Поделиться
  • 0
    По какой-то причине document.scrollleft для меня не определен.
  • 2
    мой плохой, его scrollLeft scrollTop забыл заглавными буквами
Показать ещё 1 комментарий
5

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

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

...
    });
Поделиться
4

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

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
Поделиться
4

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

Поделиться
4

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

Поделиться
3

Вот код.., как расположить диалог интерфейса 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');

   });
Поделиться
3

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

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
Поделиться
2 
$("#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});              
         }
    });
Поделиться
2

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

  • Инициализировать диалог с помощью $("#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]);

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

Поделиться
1

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

            $(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]
                            });
            })
Поделиться
1

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

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

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

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

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

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

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

Поделиться
1

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

Поделиться
0

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню