Позиціонування діалогового інтерфейсу 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 є багатофункціональним модулем підказок / діалогових стилів. Четверта демонстрація звучить аналогічно тому, що ви намагаєтесь зробити (хоча я бачу, що в ній немає точного варіанта позиціонування, який ви шукаєте.)

— Бен Келер
джерело

Перервана посилання. Смію сказати, цей плагін більше не підтримується. Можливо, було б розумно вибрати іншу відповідь?

— ДжонК

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 не працює на прихованих елементах, тому вам доведеться відкрити діалогове вікно, перш ніж розміщувати його за допомогою цього коду.

— Тодмістер

1

jQuery UI - найкращий спосіб зробити це. У Скотта Гонсалеса є поглиблене пояснення того, як працює інтерфейс jQuery і як ним користуватися

— дивним петлям

Я вважаю це заплутаним, що, наприклад, це має бути: at: 'top+50'замістьat: 'top + 50'

— Lamy

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

— milpool

81

Завдяки наведеним вище відповідям я експериментував і, нарешті, виявив, що все, що вам потрібно зробити, - це відредагувати атрибут "position" у визначенні Modal Dialog:

position:['middle',20],

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

Я серцем JQuery.

— користувач1288395
джерело

Працює без додаткових плагінів та інтуїтивно зрозумілих. Найкраще рішення, яке я бачив.

— PlanetUnknown

Фантастично просте рішення, без додаткових плагінів. Це має бути прийнятою відповіддю.

— kamui

13

Дарн, це добре, але це застаріло. "Примітка. Форми String і Array застарілі." api.jqueryui.com/dialog/#option-position Тому вам потрібно буде використовувати об'єкт позиції my / at / of thingy. Дивіться посилання про "Позицію інтерфейсу jQuery". Ви можете отримати щось на зразок позиції: {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]);
});

— Джеймін Патель
джерело

Ця відповідь спрацювала для мене і врятувала мене, ймовірно, багато хвилин / годин гуглінгу, як налаштувати інші рішення. Дякую!

— Натан

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

Зауважте, що я "відкриваю" елемент діалогового вікна перед обчисленням відносної ширини та зсуву висоти. Це тому, що jQuery не може оцінити externalWidth () або externalHeight () без того, щоб елемент інтерфейсу діалогового вікна фізично з'явився на сторінці.

Просто не забудьте встановити "модальний" значення "false" у своїх діалогових параметрах, і ви повинні мати "OK"

— розмітка
джерело

1

Я думаю, що ваші дві змінні мали на меті бути myDialogXіmyDialogY

— casey

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
джерело

для мене це було найпростішим слідувати, просто атрибут, і ви отримуєте рішення. Я не знав, що "позиція" може бути зазначена в синтаксисі квадратних дужок разом з висотою / шириною тощо.

— користувач734028

у мене немає поняття, занадто давно: D

— xhochn

15

Перевірте своє <!DOCTYPE html>

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

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

— Даніель Фліппанс
джерело

2

Це була саме та проблема, яку я мав, і це вирішило.

— BobRodes

1

Моя трансформація XML не змогла додати доктіп, ця відповідь разом із: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt отримала для мене речі, які перекидаються.

— Даніель Боуер

1

Я бажаю більше 1 грошей за цю чудову відповідь. Це вирішило мою проблему, за яку я боровся годинами.

— д-р 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 відповідно.

— користувач363690
джерело

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 у центр ......

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

Таким чином координати знаходяться в діалоговому вікні, а не в документі, і положення змінюється відповідно до шару діалогового вікна.

— Містер Гора
джерело

1

Я намагався багатьма способами встановити центр діалогу на сторінці і побачив, що код:

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

ніколи не змінюйте положення діалогу, коли це було створено.

Замість цього я змінюю рівень вибору, щоб отримати все діалогове вікно.

$("#dialog").parent() <- Це батьківський об'єкт, який функція dialog () створює в DOM, це тому, що селектор $ ("# dialog") не застосовує атрибути, вгорі, зліва.

Для центрування діалогового вікна я використовую плагін jQuery-Client-Centering-Center

$ ("# діалог"). parent (). 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-діалог {top: 100px! важливо;}

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

— санджай джангід
джерело