Posicionamiento del cuadro de diálogo de la interfaz de usuario de jQuery

116

Estoy tratando de usar la biblioteca de la interfaz de usuario del cuadro de diálogo jQuery para colocar un cuadro de diálogo junto a un texto cuando se coloca el cursor sobre él. El cuadro de diálogo jQuery toma un parámetro de posición que se mide desde la esquina superior izquierda de la ventana gráfica actual (en otras palabras, [0, 0]siempre lo colocará en la esquina superior izquierda de la ventana de su navegador, independientemente de dónde se encuentre actualmente). Sin embargo, la única forma que conozco de recuperar la ubicación es del elemento relativo a la página COMPLETA.

Lo siguiente es lo que tengo actualmente. position.topse calcula en aproximadamente 1200, lo que coloca el cuadro de diálogo muy por debajo del resto del contenido de la página.

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

¿Cómo puedo encontrar la posición correcta?

¡Gracias!

jquery jquery-ui Wickethewok
fuente
2
A partir de la versión 1.9 hay un widget de información sobre herramientas nativo.
theblang

Respuestas:

13

Vea algunos de los complementos de jQuery para otras implementaciones de un diálogo. Cluetip parece ser un complemento de estilo de diálogo / información sobre herramientas con muchas funciones. La cuarta demostración suena similar a lo que está tratando de hacer (aunque veo que no tiene la opción de posicionamiento precisa que está buscando).

Ben Koehler
fuente
Enlace roto. Me atrevería a decir que este complemento ya no se mantiene. ¿Quizás sería prudente seleccionar otra respuesta?
JohnK
109

Como alternativa, puede usar la utilidad jQuery UI Position, por ejemplo

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}
Brian M. Hunt
fuente
29
Este es el mejor enfoque. Sin embargo, dialog$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });
notaré
26
La utilidad de posición de la interfaz de usuario de jQuery no funciona en elementos ocultos, por lo que debe abrir el cuadro de diálogo antes de colocarlo con este código.
Toadmyster
1
jQuery UI es la mejor manera de hacerlo. Scott González tiene una explicación detallada de cómo funciona jQuery UI y cómo usarlo
strangeloops
Me resulta confuso que, por ejemplo, tenga que ser: en at: 'top+50'lugar deat: 'top + 50'
Lamy
para cualquiera que esté luchando (como acabo de estar) con cómo establecer más de una posición, es así: $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });
milpool
81

Gracias a algunas de las respuestas anteriores, experimenté y finalmente descubrí que todo lo que necesita hacer es editar el atributo "posición" en la definición del diálogo modal:

position:['middle',20],

JQuery no tuvo problemas con el texto "medio" para el valor "X" horizontal y mi diálogo apareció en el medio, 20px hacia abajo desde la parte superior.

Me encanta JQuery.

usuario1288395
fuente
Funciona sin complementos adicionales e intuitivo. La mejor solución que he visto.
PlanetUnknown
Solución fantásticamente simple, sin complementos adicionales. Esta debería ser la respuesta aceptada.
Kamui
13
Maldita sea, eso es bueno pero está desaprobado- "Nota: Las formas String y Array están desaprobadas". api.jqueryui.com/dialog/#option-position Por lo tanto, necesitaría usar el objeto de posición my / at / of thingy. Vea el enlace sobre "Posición de la interfaz de usuario de jQuery". Podría obtener algo como position: {my: "center top", at: "center top + 20", of: window} para que funcione como desee. Consulte el enlace para ver más ejemplos.
mikato
@mikato ... de acuerdo con jquery ui 1.10 , la posición acepta la cadena y la matriz. ... ... pero todavía me gusta la notación de objetos (me gustan las claves).
dsdsdsdsd
3
No puedo creer que necesites tanto código solo para colocar una ventana emergente de diálogo.
Gi1ber7
42

Después de leer todas las respuestas, esto finalmente funcionó para mí:

$(".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
fuente
Esta respuesta funcionó para mí y probablemente me ahorró muchos minutos / horas de buscar en Google cómo configurar las otras soluciones. ¡Gracias!
Nathan
1
+1 Me ayudó mucho cuando entendí .position () da la posición relativa y .offset (), la posición absoluta (lo que necesitaba)
daniloquio
16

Tomando el ejemplo de Jaymin un paso más allá, se me ocurrió esto para colocar un elemento de diálogo de interfaz de usuario de jQuery sobre el elemento en el que acaba de hacer clic (piense en "bocadillo de diálogo"):

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

Tenga en cuenta que "abro" el elemento ui-dialog antes de calcular las compensaciones relativas de ancho y alto. Esto se debe a que jQuery no puede evaluar externalWidth () o outerHeight () sin que el elemento ui-dialog aparezca físicamente en la página.

Solo asegúrese de establecer 'modal' en falso en sus opciones de diálogo y debería estar a-OK.

marcado
fuente
1
Creo que sus dos variables debían ser myDialogXymyDialogY
casey
16

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

Ejemplo de diálogo fijo en la esquina superior izquierda:

$("#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
fuente
para mí, este fue el más simple de seguir, solo un atributo y obtienes la solución. No sabía que la "posición" podría mencionarse con esta sintaxis de corchetes junto con la altura / ancho, etc.
user734028
No tengo ni idea, fue hace demasiado tiempo: D
xhochn
15

Revisar su <!DOCTYPE html>

He notado que si te pierdes el <!DOCTYPE html> de la parte superior de su archivo HTML, el cuadro de diálogo se muestra centrado dentro del contenido del documento, no dentro de la ventana, incluso si especifica la posición: {mi: 'centro', en: 'centro' , de: ventana}

EG: http://jsfiddle.net/npbx4561/ - Copie el contenido de la ventana de ejecución y elimine el DocType. Guárdelo como HTML y ejecútelo para ver el problema.

Daniel Flippance
fuente
2
Este fue el problema exacto que tuve, y esto lo solucionó.
BobRodes
1
Mi transformación xml no pudo agregar el tipo de documento, esta respuesta junto con: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt me puso las cosas en marcha.
Daniel Bower
1
Deseo más de 1 voto a favor por esta gran respuesta. Se solucionó mi problema por el que estuve luchando durante horas.
Dr. DS
10

Para ponerlo en la parte superior del control, puede usar este código:

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

...
    });
vive el amor
fuente
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]});
}

Coloca un diálogo justo debajo de un elemento. Utilicé la función offset () solo porque calcula la posición relativa a la esquina superior izquierda del navegador, pero la función position () calcula la posición relativa al div padre o iframe al padre del elemento.

M. Belén
fuente
6

en lugar de hacer jquery puro, haría:

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

Si entiendo correctamente su pregunta, el código que tiene es colocar el cuadro de diálogo como si la página no tuviera desplazamiento, pero desea que tenga en cuenta el desplazamiento. mi código debería hacer eso.

Samuel
fuente
Por alguna razón, document.scrollleft no está definido para mí.
Wickethewok
2
mi mal, su scrollLeft scrollTop se olvidó de sacar provecho
Samuel
var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (documento) .scrollTop (); trabajó para mi. El problema es que no puedo obtener la altura y el ancho del cuadro de diálogo después de cambiar la información en él.
rball
4

Esta página muestra cómo determinar su desplazamiento de desplazamiento. jQuery puede tener una funcionalidad similar pero no pude encontrarla. Con la función getScrollXY que se muestra en la página, debería poder restar las coordenadas xey de los resultados .position ().

Philip Tinney
fuente
4

un poco tarde, pero puede hacer esto ahora usando $ j (object) .offset (). left y .top en consecuencia.

user363690
fuente
4

No creo que el bocadillo sea del todo correcto. Lo modifiqué un poco para que funcionara y el elemento se abre justo debajo del enlace.

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

Para fijar la posición central, utilizo:

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

Aquí está el código ..., cómo colocar el cuadro de diálogo de la interfaz de usuario de jQuery en el 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
fuente
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
fuente
2

puede usar $(this).offset(), la posición está relacionada con el padre

neil tang
fuente
2

Probé todas las soluciones propuestas pero no funcionarán porque el cuadro de diálogo no es parte del documento principal y tendrá su propia capa (pero esa es mi suposición).

  1. Inicialice el diálogo con $("#dialog").dialog("option", "position", 'top')
  2. Ábrelo con $(dialog).dialog("open");

  3. Luego obtenga la xey del cuadro de diálogo mostrado (¡no cualquier otro nodo del 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]);

De esta forma, las coordenadas son del diálogo, no del documento y la posición se modifica de acuerdo con la capa del diálogo.

Señor montaña
fuente
1

Intenté de muchas maneras que mi diálogo se centrara en la página y vi que el código:

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

nunca cambie la posición del diálogo cuando se creó.

En lugar de, cambio el nivel del selector para obtener el diálogo completo.

$("#dialog").parent() <- Este es el objeto padre que la función dialog () crea en el DOM, esto se debe a que el selector $ ("# dialog") no aplica los atributos, arriba, izquierda.

Para centrar mi cuadro de diálogo, utilizo jQuery-Client-Centering-Plugin

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

jmozko
fuente
1

Las soluciones anteriores son muy ciertas ... pero el cuadro de diálogo de la interfaz de usuario no conserva la posición después de que se cambia el tamaño de la ventana. debajo del código hace esto

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

Puede establecer la posición superior con estilo para mostrarla en el centro, vio que el código:

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

Este estilo debe mostrar un cuadro de diálogo 100px debajo de la parte superior.

sanjay jangid
fuente