Posicionamento da caixa de diálogo do jQuery UI

116

Estou tentando usar a biblioteca de IU do diálogo jQuery para posicionar um diálogo próximo a algum texto quando ele é passado. A caixa de diálogo jQuery usa um parâmetro de posição que é medido a partir do canto superior esquerdo da janela de visualização atual (em outras palavras, [0, 0]sempre o colocará no canto superior esquerdo da janela do navegador, independentemente de para onde você está rolando atualmente). No entanto, a única maneira que conheço de recuperar a localização é pelo elemento relativo à página INTEIRA.

O seguinte é o que tenho atualmente. position.topé calculado para ser algo como 1200 ou mais, o que coloca o diálogo bem abaixo do resto do conteúdo da página.

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

Como posso encontrar a posição correta?

Obrigado!

jquery jquery-ui Wickethewok
fonte
2
A partir da versão 1.9, existe um widget de dica de ferramenta nativo.
theblang

Respostas:

13

Confira alguns dos plug-ins jQuery para outras implementações de um diálogo. Cluetip parece ser um plug-in de estilo de caixa de diálogo / tooltip rico em recursos. A quarta demonstração soa semelhante ao que você está tentando fazer (embora eu veja que não tem a opção de posicionamento precisa que você está procurando).

Ben Koehler
fonte
Link quebrado. Atrevo-me a dizer que este plugin não é mais mantido. Talvez seja sensato selecionar outra resposta?
JohnK
109

Como alternativa, você pode usar o utilitário jQuery UI Position, por exemplo

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
Brian M. Hunt
fonte
29
Esta é a melhor abordagem. No entanto, observarei que, se você estiver criando o diálogo pela primeira vez, precisará de uma chamada extra para dialog:$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
wsanville
26
O utilitário jQuery UI position não funciona em elementos ocultos, portanto, você deve abrir a caixa de diálogo antes de posicioná-la com este código.
Toadmyster de
1
jQuery UI é a melhor maneira de fazer isso. Scott González tem uma explicação detalhada de como a IU do jQuery funciona e como usá-la
strangeloops
Acho confuso que, por exemplo, tem que ser: em at: 'top+50'vez deat: 'top + 50'
Lamy
para quem está lutando (como eu estava) com como definir mais de uma posição, é assim: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
milpool
81

Graças a algumas respostas acima, eu experimentei e finalmente descobri que tudo que você precisa fazer é editar o atributo "posição" na definição do Diálogo Modal:

position:['middle',20],

JQuery não teve problemas com o texto do "meio" para o valor "X" horizontal e minha caixa de diálogo apareceu no meio, 20px abaixo do topo.

Eu amo JQuery.

user1288395
fonte
Funciona sem plug-ins adicionais e é intuitivo. Melhor solução que já vi.
PlanetUnknown
Solução incrivelmente simples, sem plug-ins adicionais. Esta deve ser a resposta aceita.
Kamui
13
Droga, isso é bom, mas está obsoleto- "Nota: os formulários String e Array estão obsoletos." api.jqueryui.com/dialog/#option-position Então, você precisa usar o objeto de posição my / at / of thingy. Veja o link lá sobre "Posição da interface do usuário jQuery". Você poderia obter algo como position: {my: "center top", em: "center top + 20", of: window} para trabalhar como você deseja. Veja o link para mais exemplos.
Mikato
@mikato ... de acordo com jquery ui 1.10 , a posição aceita a string e o array. ... ... mas ainda gosto da notação de objeto (gosto das teclas).
dsdsdsdsd
3
Eu não posso acreditar que você precisa de tanto código apenas para posicionar um pop-up de diálogo.
Gi1ber7
42

Depois de ler todas as respostas, isso finalmente funcionou para mim:

$(".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
fonte
Essa resposta funcionou para mim e provavelmente me economizou muitos minutos / horas de buscas no Google como configurar as outras soluções. Obrigado!
Nathan
1
+1 Me ajudou muito quando entendi .position () dá a posição relativa e .offset (), a posição absoluta (o que eu precisava)
daniloquio
16

Levando o exemplo de Jaymin um passo adiante, eu vim com isso para posicionar um elemento jQuery ui-dialog acima do elemento que você acabou de clicar (pense em "balão de fala"):

$('#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] );

Observe que eu "abro" o elemento ui-dialog antes de calcular os deslocamentos relativos de largura e altura. Isso ocorre porque jQuery não pode avaliar outerWidth () ou outerHeight () sem que o elemento ui-dialog apareça fisicamente na página.

Apenas certifique-se de definir 'modal' como false nas opções da caixa de diálogo e você estará OK.

marcado
fonte
1
Eu acho que suas duas variáveis ​​deveriam ser myDialogXemyDialogY
Casey
16

http://docs.jquery.com/UI/API/1.8/Dialog

Exemplo de diálogo fixo no canto superior esquerdo:

$("#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
fonte
para mim esse foi o mais simples de seguir, basta um atributo e você obtém a solução. Eu não sabia que "posição" poderia ser mencionada com esta sintaxe de colchetes junto com a altura / largura etc lá em cima.
user734028
não tenho ideia, é muito tempo atrás: D
xhochn
15

Verifique o seu <!DOCTYPE html>

Eu percebi que se você perder o <!DOCTYPE html> do início do seu arquivo HTML, a caixa de diálogo é mostrada centralizada no conteúdo do documento, e não na janela, mesmo se você especificar a posição: {my: 'center', at: 'center' , de: janela}

EX .: http://jsfiddle.net/npbx4561/ - Copie o conteúdo da janela de execução e remova o DocType. Salve como HTML e execute para ver o problema.

Daniel Flippance
fonte
2
Esse era exatamente o problema que eu tinha, e isso resolveu.
BobRodes
1
Minha transformação xml não estava adicionando o doctype, esta resposta junto com: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt fez as coisas acontecerem para mim.
Daniel Bower
1
Desejo mais de 1 voto positivo para esta ótima resposta. Ele corrigiu meu problema pelo qual eu estava lutando por horas.
Dr. DS
10

Para colocá-lo em cima do controle, você pode usar este código:

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

...
    });
amor ao vivo
fonte
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]});
}

Posiciona uma caixa de diálogo logo abaixo de um elemento. Eu usei a função offset () apenas porque ela calcula a posição relativa ao canto superior esquerdo do navegador, mas a função position () calcula a posição relativa ao div pai ou iframe daquele pai do elemento.

M. Belen
fonte
6

em vez de fazer jquery puro, eu faria:

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

Se eu estou entendendo sua pergunta corretamente, o código que você tem está posicionando o diálogo como se a página não tivesse rolagem, mas você quer levar a rolagem em consideração. meu código deve fazer isso.

Samuel
fonte
Por algum motivo, document.scrollleft é indefinido para mim.
Wickethewok
2
meu mal, é scrollLeft scrollTop esqueci de capitalizar
Samuel
var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); trabalhou para mim. O problema é que não consigo obter a altura e a largura da caixa de diálogo depois de alterar as informações nela.
rball
4

Esta página mostra como determinar o deslocamento de rolagem. O jQuery pode ter uma funcionalidade semelhante, mas não consegui encontrar. Usando a função getScrollXY mostrada na página, você deve ser capaz de subtrair as coordenadas xey dos resultados .position ().

Philip Tinney
fonte
4

um pouco tarde, mas você pode fazer isso agora usando $ j (object) .offset (). left e .top de acordo.

usuário 363690
fonte
4

Não acho que o balão de fala esteja certo. Eu ajustei um pouco para que funcionasse e o item fosse aberto logo abaixo do link.

function PositionDialog(link) {
    $('#myDialog').dialog('open');
    var myDialogX = $(link).position().left;
    var myDialogY = $(link).position().top + $(link).outerHeight();
    $('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
penhasco
fonte
3

Para fixar a posição central, eu uso:

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
fonte
3

Aqui está o código .., como posicionar a caixa de diálogo jQuery UI no centro ......

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 RS
fonte
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});              
         }
    });
Günes Erdemi
fonte
2

você pode usar $(this).offset(), a posição está relacionada ao pai

Neil Tang
fonte
2

Tentei todas as soluções propostas, mas elas não funcionam porque a caixa de diálogo não faz parte do documento principal e terá sua própria camada (mas esse é meu palpite).

  1. Inicialize o diálogo com $("#dialog").dialog("option", "position", 'top')
  2. Abra com $(dialog).dialog("open");

  3. Em seguida, obtenha o xey da caixa de diálogo exibida (nenhum outro nó do documento!)

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

Desta forma, as coordenadas são da caixa de diálogo e não do documento e a posição é alterada de acordo com a camada da caixa de diálogo.

Mr.Mountain
fonte
1

Tentei de várias maneiras fazer com que meu diálogo ficasse centralizado na página e vi que o código:

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

nunca mude a posição da caixa de diálogo quando ela foi criada.

Em vez de, eu altero o nível do seletor para obter todo o diálogo.

$("#dialog").parent() <- Este é o objeto pai que a função dialog () cria no DOM, isso ocorre porque o seletor $ ("# dialog") não aplica os atributos, superior, esquerdo.

Para centralizar minha caixa de diálogo, uso o jQuery-Client-Centering-Plugin

$ ("# diálogo"). parent (). centerInClient ();

Jmozko
fonte
1

as soluções acima são verdadeiras ... mas a caixa de diálogo da IU não mantém a posição após a janela ser redimensionada. o código abaixo faz isso

            $(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
fonte
0

Você pode definir a posição superior no estilo para exibição no centro, viu que o código:

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

Este estilo deve mostrar a caixa de diálogo 100px abaixo do topo.

Sanjay Jangid
fonte