Позиционирование диалогового окна пользовательского интерфейса jQuery

116

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

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

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

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

Спасибо!

jquery jquery-ui

— Wickethewok
источник

2

Начиная с версии 1.9 существует встроенный виджет всплывающей подсказки.

— theblang

13

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

— Бен Келер
источник

Неработающей ссылке. Я полагаю, этот плагин больше не поддерживается. Может быть, стоит выбрать другой ответ?

— JohnK,

109

В качестве альтернативы вы можете использовать утилиту 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) });

— wsanville

26

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

— Toadmyster

1

jQuery UI - лучший способ сделать это. У Скотта Гонсалеса есть подробное объяснение того, как работает пользовательский интерфейс jQuery и как его использовать

— Strangeloops

Меня сбивает с толку то, что, например, это должно быть: at: 'top+50'вместоat: 'top + 50'

— Lamy

для всех, кто борется (как я только что был) с тем, как установить более одной позиции, это примерно так: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— milpool

81

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

position:['middle',20],

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

Я болею за JQuery.

— user1288395
источник

Работает без дополнительных плагинов и интуитивно понятен. Лучшее решение, которое я видел.

— PlanetUnknown

Фантастически простое решение без дополнительных плагинов. Это должен быть принятый ответ.

— kamui

13

Черт, это хорошо, но это устарело - «Примечание: формы String и Array устарели». api.jqueryui.com/dialog/#option-position Итак, вам нужно будет использовать объект позиции my / at / of thingy. См. Ссылку о «Положение пользовательского интерфейса jQuery». Вы можете получить что-то вроде position: {my: "center top", at: "center top + 20", of: window}, чтобы работать так, как вы хотите. См. Ссылку для получения дополнительных примеров.

— mikato

@mikato ... согласно jquery ui 1.10 позиция принимает строку и массив. ... ... но мне все еще нравится объектная нотация (мне нравятся клавиши).

— dsdsdsdsd

3

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

— Gi1ber7

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

— Джаймин Патель
источник

Этот ответ сработал для меня и сэкономил мне, вероятно, много минут / часов поиска в Google, как настроить другие решения. Спасибо!

— Натан

1

+1 Мне очень помогло, когда я понял .position () дает относительное положение, а .offset () - абсолютное положение (что мне было нужно)

— daniloquio

16

Взяв пример Джаймина еще дальше, я придумал следующее для размещения элемента пользовательского диалога 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 не может оценивать externalWidth () или outerHeight () без физического отображения элемента ui-dialog на странице.

Просто убедитесь, что для параметра 'modal' установлено значение false в параметрах диалогового окна, и вы должны быть в порядке.

— размечена
источник

1

Я думаю, что ваши две переменные должны быть myDialogXиmyDialogY

— Кейси

16

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

— xhochn
источник

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

— user734028

— Понятия

15

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

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

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

— Дэниел Флиппанс
источник

2

Это была именно та проблема, с которой я столкнулся, и это решило ее.

— BobRodes,

1

Моему преобразованию xml не удалось добавить doctype, этот ответ вместе с: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt заставил меня работать .

— Дэниел Бауэр

1

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

— Dr. DS

10

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

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

...
    });

— живи любя
источник

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

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

— Самуил
источник

По какой-то причине document.scrollleft для меня не определен.

— Wickethewok,

2

мой плохой, его scrollLeft scrollTop забыл использовать заглавные буквы

— Samuel

var x = el.position (). влево + el.outerWidth (); var y = el.position (). top - $ (документ) .scrollTop (); работал у меня. Проблема в том, что я не могу получить высоту и ширину диалогового окна после изменения информации в нем.

— rball

4

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

— Филип Тинни
источник

4

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

— user363690
источник

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

— утес
источник

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

— Эдуардо Куомо
источник

3

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

   });

— Ману RS
источник

3

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

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

— Нил Тан
источник

2

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

Инициализируйте диалог с помощью $("#dialog").dialog("option", "position", 'top')
Откройте это с помощью $(dialog).dialog("open");
Затем получите 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]);

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

— Mr.Mountain
источник

1

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

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

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

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

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

Чтобы центрировать свой диалог, я использую центрировать плагин jQuery-Client-Centering-Plugin

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

— jmozko
источник

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

— Каустубх - КАЙ
источник

0

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

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

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

— Санджай Джангид
источник