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

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

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

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

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

Спасибо!

108 голосов | спросил Wickethewok 13 PMpMon, 13 Apr 2009 20:50:09 +040050Monday 2009, 20:50:09

20 ответов


0

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

ответил Ben Koehler 13 PMpMon, 13 Apr 2009 22:41:47 +040041Monday 2009, 22:41:47
0

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
ответил Brian M. Hunt 14 J000000Wednesday10 2010, 06:40:58
0

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

position:['middle',20],

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

Я люблю JQuery.

ответил user1288395 23 MarpmFri, 23 Mar 2012 17:59:13 +04002012-03-23T17:59:13+04:0005 2012, 17:59:13
0

После прочтения всех ответов это, наконец, сработало для меня:

$(".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]);
});
ответил Jaymin Patel 19 Jpm1000000pmTue, 19 Jan 2010 22:33:25 +030010 2010, 22:33:25
0

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

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

ответил markedup 24 FebruaryEurope/MoscowbWed, 24 Feb 2010 18:26:45 +0300000000pmWed, 24 Feb 2010 18:26:45 +030010 2010, 18:26:45
0

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 26 FebruaryEurope/MoscowbTue, 26 Feb 2013 15:30:42 +0400000000pmTue, 26 Feb 2013 15:30:42 +040013 2013, 15:30:42
0

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

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

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

ответил Daniel Flippance 23 Jpm1000000pmFri, 23 Jan 2015 13:14:06 +030015 2015, 13:14:06
0
$(".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 этого родителя элемента.

ответил M. Belen 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 23 Sep 2011 17:15:27 +0400 2011, 17:15:27
0

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

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

...
    });
ответил live-love 13 J0000006Europe/Moscow 2014, 00:38:25
0

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

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

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

ответил Samuel 13 PMpMon, 13 Apr 2009 22:20:33 +040020Monday 2009, 22:20:33
0

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

ответил Philip Tinney 13 PMpMon, 13 Apr 2009 23:46:14 +040046Monday 2009, 23:46:14
0

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

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
ответил cliff 20 PM00000060000000431 2010, 18:47:04
0

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

open : function() {
    var t = $(this).parent(), w = window;
    t.offset({
        top: (w.height() / 2) - (t.height() / 2),
        left: (w.width() / 2) - (t.width() / 2)
    });
}
ответил Eduardo Cuomo 2 PM00000060000002631 2013, 18:17:26
0

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

   });
ответил Manu R S 28 +04002013-10-28T20:43:23+04:00312013bEurope/MoscowMon, 28 Oct 2013 20:43:23 +0400 2013, 20:43:23
0
$("#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});              
         }
    });
ответил Günes Erdemi 8 AMpWed, 08 Apr 2015 09:58:23 +030058Wednesday 2015, 09:58:23
0

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

  1. Инициализируйте диалог с помощью $("#dialog").dialog("option", "position", 'top')
  2. Откройте его с помощью $(dialog).dialog("open");
  3. Затем получите 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 26 12012vEurope/Moscow11bEurope/MoscowMon, 26 Nov 2012 16:37:28 +0400 2012, 16:37:28
0

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

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

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

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

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

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

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

ответил jmozko 22 MaramThu, 22 Mar 2012 06:03:35 +04002012-03-22T06:03:35+04:0006 2012, 06:03:35
0

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

ответил neil tang 4 J0000006Europe/Moscow 2010, 12:18:00
0

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

            $(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]
                            });
            })
ответил Kaustubh - KAY 24 +04002013-10-24T01:22:15+04:00312013bEurope/MoscowThu, 24 Oct 2013 01:22:15 +0400 2013, 01:22:15
0

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

.ui-dialog {top: 100px! важный;}

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

ответил sanjay jangid 8 J0000006Europe/Moscow 2017, 10:10:21

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132