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

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



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



$(".mytext").mouseover(function() {

    position = $(this).position();

    $("#dialog").dialog('option', 'position', [position.top, position.left]);

}


как я могу найти правильное положение?



спасибо!

579   21  

21 ответов:

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

13  
2016-10-26 02:01:07

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

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
106  
2010-07-14 18:07:37

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

position:['middle',20],

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

Я сердце JQuery.

78  
2012-03-23 23:02:52

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

$(".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]);
});
42  
2010-01-20 04:04:01

взяв пример Джеймина на шаг дальше, я придумал это для размещения элемента jQuery ui-dialog над элементом, который вы только что нажали (подумайте "речевой пузырь"):

$('#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 не может оценить outerWidth() или outerHeight() без элемента ui-dialog, физически появляющегося на странице.

просто не забудьте установить 'modal' в false в вашем диалоговые параметры, и вы должны быть-ОК.

16  
2011-01-16 10:42:41

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");
});
15  
2013-02-26 13:30:42

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

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

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

13  
2015-01-23 12:14:06 
$(".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  
2011-09-23 16:15:27

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

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

...
    });
7  
2014-06-12 23:38:25

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

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

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

6  
2012-02-21 15:26:35

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

4  
2009-04-13 22:46:14

немного поздно, но вы можете сделать это сейчас с помощью $j(object).смещение.)(левый и .топ соответственно.

4  
2010-06-10 19:30:16

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

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  
2010-08-20 17:47:04

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

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  
2013-08-02 17:17:26

вот код..,как расположить диалоговое окно пользовательского интерфейса 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  
2013-10-28 19:00:46 
$("#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});              
         }
    });
3  
2015-04-08 09:58:23

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

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

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

2  
2012-11-26 14:37:28

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

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

никогда не изменяйте положение диалогового окна при его создании.

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

$("#dialog").parent()

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

$("#dialog").родитель.)(centerInClient ();

1  
2012-03-22 04:03:35

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

1  
2012-05-13 01:24:06

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

            $(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  
2013-10-24 00:22:15

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

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

этот стиль должен показывать диалоговое окно 100px ниже сверху.

0  
2017-06-08 10:10:21

Comments

    Ничего не найдено.
Click here to cancel reply.