JQuery UI диалог позиционирования - PullRequest
Новая
       61

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

112 голосов
/ 13 апреля 2009

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

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

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

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

Спасибо!

Ответы [ 21 ]

108 голосов
/ 14 июля 2010

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
82 голосов
/ 23 марта 2012

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

position:['middle',20],

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

Я сердце JQuery.

42 голосов
/ 19 января 2010

После прочтения всех ответов у меня наконец получилось: 

$(".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]);
});
16 голосов
/ 24 февраля 2010

Следуя примеру Джеймина, я придумал, как разместить элемент пользовательского диалога 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, физически отображаемого на странице.

Просто убедитесь, что в ваших настройках диалогового окна установлено значение «модальный», и у вас должно получиться «ОК».

15 голосов
/ 26 февраля 2013

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");
});
14 голосов
/ 13 апреля 2009

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

14 голосов
/ 23 января 2015

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

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

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

7 голосов
/ 23 сентября 2011 
$(".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 этого родителя элемента.

7 голосов
/ 13 июня 2014

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

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

...
    });
6 голосов
/ 13 апреля 2009

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

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...