jQuery interfaz de usuario

Question

jQuery interfaz de usuario

Estoy tratando de usar la biblioteca jQuery dialog UI para colocar un diálogo junto a un texto cuando se pasa el cursor sobre él. El diálogo de jQuery toma un parámetro de posición que se mide desde la esquina superior izquierda de la ventana actual (en otras palabras, [0, 0] siempre lo pondrá en la esquina superior izquierda de la ventana de su navegador, independientemente de dónde se desplace actualmente). Sin embargo, la única manera que conozco para recuperar la ubicación es del elemento relativo a la TOTALIDAD pagina.

Lo siguiente es lo que tengo actualmente. position.top se calcula que es algo así como 1200 o así, lo que pone el 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!

108

jquery jquery-ui

Author: Wickethewok, 2009-04-13

Source

21 answers

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

106

Author: Brian M. Hunt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-07-14 15:07:37

Gracias a algunas respuestas anteriores, experimenté y finalmente descubrí que todo lo que necesita hacer es editar el atributo "position" en la definición del Diálogo Modal:

position:['middle',20],

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

Me encanta jQuery.

78

Author: user1288395,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-23 21:02:52

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

42

Author: Jaymin Patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-01-20 02:04:01

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

$('#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 de anchura y altura relativas. Esto se debe a que jQuery no puede evaluar outerWidth() o outerHeight() sin que el elemento ui-dialog aparezca físicamente en la página.

Solo asegúrese de establecer' modal ' a false en sus opciones de diálogo y deberías estar bien.

16

Author: markedup,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-01-16 08:42:41

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");
});

15

Author: xhochn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-26 11:30:42

Compruebe su <!DOCTYPE html>

He notado que si se pierde el <!DOCTYPE html> de la parte superior de su archivo HTML, el 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 ejecutar y elimine el DocType. Guardar como HTML y ejecutar para ver el problema.

13

Author: Daniel Flippance,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-23 10: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]});
}

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 ese padre del elemento.

7

Author: M. Belen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-09-23 13:15:27

Para ponerlo justo encima del control, puede usar este código:

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

...
    });

7

Author: live-love,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-06-12 20:38:25

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 su pregunta correctamente, el código que tiene está posicionando el 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.

6

Author: Samuel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-02-21 13:26:35

Esta página muestra cómo determinar el desplazamiento del desplazamiento. jQuery puede tener una funcionalidad similar, pero no pude encontrarlo. Usando la función getScrollXY que se muestra en la página, debería poder restar los coords x e y del .resultados de position ().

4

Author: Philip Tinney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-04-13 19:46:14

Un poco tarde, pero puede hacer esto ahora usando $j(object).compensar().izquierda y .arriba en consecuencia.

4

Author: user363690,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-06-10 16:30:16

No creo que la burbuja de discurso sea del todo correcta. Lo ajusté 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]);
}

4

Author: cliff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-08-20 14:47:04

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

3

Author: Eduardo Cuomo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-02 14:17:26

Aquí está el código.., cómo colocar el diálogo de 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');

   });

3

Author: Manu R S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-28 17: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

Author: Günes Erdemi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-08 06:58:23

He probado todas las soluciones propuestas pero no funcionarán porque el diálogo no es parte del documento principal y will tiene su propia capa (pero esa es mi suposición educada).

Inicializa el diálogo con $("#dialog").dialog("option", "position", 'top')
Ábrelo con $(dialog).dialog("open");
A continuación, obtenga la x y la y 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 manera las coordenadas son del diálogo no del documento y la posición se altera de acuerdo con la capa del diálogo.

2

Author: Mr.Mountain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-26 12:37:28

Traté de muchas maneras de conseguir 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 todo el diálogo.

$("#dialog").parent()

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

$("#dialog").padre().centerInClient ();

1

Author: jmozko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-22 02:03:35

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

1

Author: neil tang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-12 22:24:06

Las soluciones anteriores son muy ciertas...pero el diálogo de interfaz de usuario no conserva la posición después de cambiar el tamaño de la ventana. por 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]
                            });
            })

1

Author: Kaustubh - KAY,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-23 21:22:15

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

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

Este estilo debe mostrar el cuadro de diálogo 100px abajo desde la parte superior.

0

Author: sanjay jangid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-08 07:10:21

score 13 · Accepted Answer

Echa un vistazo a algunos de los plugins de jQuery para otras implementaciones de un diálogo. Cluetip parece ser un complemento de estilo tooltip/dialog rico en características. La 4ª demo suena similar a lo que estás tratando de hacer (aunque veo que no tiene la opción de posicionamiento preciso que estás buscando.)