Posizionamento della finestra di dialogo dell'interfaccia utente jQuery

116

Sto cercando di utilizzare la libreria dell'interfaccia utente della finestra di dialogo jQuery per posizionare una finestra di dialogo accanto a un testo quando si passa sopra con il mouse. La finestra di dialogo jQuery accetta un parametro di posizione che viene misurato dall'angolo in alto a sinistra della visualizzazione corrente (in altre parole, lo [0, 0]metterà sempre nell'angolo in alto a sinistra della finestra del browser, indipendentemente da dove si sta attualmente scorrendo). Tuttavia, l'unico modo che conosco per recuperare la posizione è dell'elemento relativo all'INTERA pagina.

Quello che segue è quello che ho attualmente. position.topè calcolato per essere qualcosa come 1200 o giù di lì, il che mette la finestra di dialogo ben al di sotto del resto del contenuto della pagina.

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

Come posso trovare la posizione corretta?

Grazie!

jquery jquery-ui

— Wickethewok
fonte

2

A partire dalla versione 1.9 è disponibile un widget tooltip nativo.

— theblang

13

Dai un'occhiata ad alcuni dei plugin jQuery per altre implementazioni di una finestra di dialogo. Cluetip sembra essere un plug-in in stile tooltip / dialogo ricco di funzionalità. La quarta demo sembra simile a quello che stai cercando di fare (anche se vedo che non ha l'opzione di posizionamento precisa che stai cercando.)

— Ben Koehler
fonte

Collegamento non funzionante. Oserei dire che questo plugin non è più mantenuto. Forse sarebbe saggio selezionare un'altra risposta?

— JohnK

109

In alternativa, puoi usare l' utility jQuery UIPosition es

$(".mytext").mouseover(function() {
    var target = $(this);
    $("#dialog").dialog("widget").position({
       my: 'left',
       at: 'right',
       of: target
    });
}

— Brian M. Hunt
fonte

29

Questo è l'approccio migliore. Noterò però che se stai creando la finestra di dialogo per la prima volta, avrai bisogno di una chiamata extra per fare dialogquesto:

$('#dialog').dialog({ width: 300 /* insert your options */ }).dialog('widget').position({ my: 'left', at: 'right', of: $(this) });

— wsanville

26

L'utilità di posizionamento dell'interfaccia utente jQuery non funziona su elementi nascosti, quindi devi aprire la finestra di dialogo prima di posizionarla con questo codice.

— Toadmyster

1

jQuery UI è il modo migliore per farlo. Scott González ha una spiegazione approfondita di come funziona jQuery UI e di come usarla

— strangeloops

Trovo confuso il fatto che ad esempio debba essere: at: 'top+50'invece diat: 'top + 50'

— Lamy

per chiunque abbia difficoltà (come ero appena $('dialog').dialog({ position: { my: 'left top', at: 'left+50 top+50'}, });

— arrivato

81

Grazie ad alcune risposte sopra, ho sperimentato e alla fine ho scoperto che tutto ciò che devi fare è modificare l'attributo "position" nella definizione del dialogo modale:

position:['middle',20],

JQuery non ha avuto problemi con il testo "centrale" per il valore "X" orizzontale e la mia finestra di dialogo è spuntata al centro, 20px dall'alto.

Mi piace JQuery.

— user1288395
fonte

Funziona senza plug-in aggiuntivi e intuitivo. La migliore soluzione che ho visto.

— PlanetUnknown

Soluzione straordinariamente semplice, senza plug-in aggiuntivi. Questa dovrebbe essere la risposta accettata.

— kamui

13

Accidenti, è carino ma è deprecato: "Nota: i moduli String e Array sono deprecati". api.jqueryui.com/dialog/#option-position Quindi dovresti usare l'oggetto position my / at / of thingy. Vedere il collegamento lì su "jQuery UI Position". Potresti ottenere qualcosa come position: {my: "center top", at: "center top + 20", of: window} per funzionare come vuoi. Vedere il collegamento per ulteriori esempi.

— mikato

@mikato ... secondo jquery ui 1.10 , position accetta la stringa e l'array. ... ... ma mi piace ancora la notazione dell'oggetto (mi piacciono le chiavi).

— dsdsdsdsd

3

Non posso credere che tu abbia bisogno di così tanto codice solo per posizionare un popup di dialogo.

— Gi1ber7

42

Dopo aver letto tutte le risposte, questo ha finalmente funzionato per me:

$(".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

Questa risposta ha funzionato per me e mi ha fatto risparmiare probabilmente molti minuti / ore di ricerca su Google su come configurare le altre soluzioni. Grazie!

— Nathan

1

+1 Mi ha aiutato molto quando ho capito .position () fornisce la posizione relativa e .offset (), la posizione assoluta (ciò di cui avevo bisogno)

— daniloquio

16

Facendo un ulteriore passo avanti nell'esempio di Jaymin, ho pensato a questo per posizionare un elemento dell'interfaccia utente di jQuery sopra l'elemento su cui hai appena fatto clic (pensa a "fumetto"):

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

Si noti che "apro" l'elemento ui-dialog prima di calcolare gli offset relativi di larghezza e altezza. Questo perché jQuery non può valutare outerWidth () o outerHeight () senza che l'elemento ui-dialog appaia fisicamente nella pagina.

Assicurati solo di impostare "modale" su false nelle opzioni di dialogo e dovresti essere OK.

— markedup
fonte

1

Penso che le tue due variabili intendessero essere myDialogXemyDialogY

— casey

16

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

Esempio di finestra di dialogo fissa nell'angolo superiore sinistro:

$("#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

per me questo è stato il più semplice da seguire, solo un attributo e ottieni la soluzione. Non sapevo che la "posizione" potesse essere menzionata con questa sintassi delle parentesi quadre insieme ad altezza / larghezza ecc.

— user734028

non ho idea, è passato troppo tempo: D

— xhochn

15

Controlla il tuo <!DOCTYPE html>

Ho notato che se perdi la <!DOCTYPE html>parte superiore del file HTML, la finestra di dialogo viene mostrata centrata nel contenuto del documento non all'interno della finestra, anche se specifichi la posizione: {my: 'center', at: 'center' , di: finestra}

EG: http://jsfiddle.net/npbx4561/ - Copia il contenuto dalla finestra di esecuzione e rimuovi il DocType. Salva come HTML ed esegui per vedere il problema.

— Daniel Flippance
fonte

2

Questo era il problema esatto che ho avuto e questo lo ha risolto.

— BobRodes

1

La mia trasformazione xml non riusciva ad aggiungere il doctype, questa risposta insieme a: stackoverflow.com/questions/3387127/set-html5-doctype-with-xslt ha fatto funzionare le cose per me.

— Daniel Bower

1

Vorrei più di un voto positivo per questa ottima risposta. Ha risolto il mio problema per il quale stavo lottando per ore.

— Dr. DS

10

Per metterlo in cima al controllo, puoi usare questo codice:

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

...
    });

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

Posiziona una finestra di dialogo appena sotto un elemento. Ho usato la funzione offset () solo perché calcola la posizione relativa all'angolo superiore sinistro del browser, ma la funzione position () calcola la posizione relativa al div genitore o iframe quel genitore dell'elemento.

— M. Belen
fonte

6

invece di fare puro jquery, farei:

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

se capisco correttamente la tua domanda, il codice che hai sta posizionando la finestra di dialogo come se la pagina non avesse scorrimento, ma vuoi che tenga conto dello scorrimento. il mio codice dovrebbe farlo.

— Samuel
fonte

Per qualche ragione, document.scrollleft non è definito per me.

— Wickethewok

2

male, il suo scrollLeft scrollTop ha dimenticato di scrivere in maiuscolo

— Samuel

var x = el.position (). left + el.outerWidth (); var y = el.position (). top - $ (document) .scrollTop (); ha funzionato per me. Il problema è che non riesco a ottenere l'altezza e la larghezza della finestra di dialogo dopo aver modificato le informazioni al suo interno.

— rball

4

Questa pagina mostra come determinare l'offset di scorrimento. jQuery potrebbe avere funzionalità simili ma non sono riuscito a trovarlo. Usando la funzione getScrollXY mostrata nella pagina, dovresti essere in grado di sottrarre le coordinate xey dai risultati .position ().

— Philip Tinney
fonte

4

un po 'tardi ma ora puoi farlo usando $ j (object) .offset (). left e .top di conseguenza.

— user363690
fonte

4

Non credo che il fumetto sia del tutto corretto. L'ho modificato un po 'in modo che funzionasse e l'elemento si apre proprio sotto il collegamento.

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

— scogliera
fonte

3

Per fissare la posizione centrale, utilizzo:

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

Ecco il codice .., come posizionare la finestra di dialogo dell'interfaccia utente di jQuery al 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

puoi usare $(this).offset(), la posizione è correlata al genitore

— neil tang
fonte

2

Ho provato tutte le soluzioni proposte ma non funzioneranno perché la finestra di dialogo non fa parte del documento principale e avrà il suo livello (ma questa è la mia ipotesi plausibile).

Inizializza la finestra di dialogo con $("#dialog").dialog("option", "position", 'top')
Aprilo con $(dialog).dialog("open");
Quindi prendi la xey della finestra di dialogo visualizzata (non qualsiasi altro 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]);

In questo modo le coordinate provengono dalla finestra di dialogo non dal documento e la posizione viene modificata in base al livello della finestra di dialogo.

— Mr.Mountain
fonte

1

Ho provato in molti modi per centrare la mia finestra di dialogo sulla pagina e ho visto che il codice:

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

non modificare mai la posizione della finestra di dialogo quando è stata creata.

Invece di cambiare il livello del selettore per ottenere l'intera finestra di dialogo.

$("#dialog").parent() <- Questo è l'oggetto genitore che la funzione dialog () crea sul DOM, questo perché il selettore $ ("# dialog") non applica gli attributi, in alto, a sinistra.

Per centrare la mia finestra di dialogo, utilizzo jQuery-Client-Centering-Plugin

$ ( "# Finestra di dialogo") parent () centerInClient ()..;

— jmozko
fonte

1

le soluzioni di cui sopra sono molto vere ... ma la finestra di dialogo dell'interfaccia utente non mantiene la posizione dopo il ridimensionamento della finestra. sotto il codice fa questo

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

Puoi impostare la prima posizione nello stile per la visualizzazione al centro, visto che il codice:

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

Questo stile dovrebbe mostrare la finestra di dialogo 100px sotto dall'alto.

— sanjay jangid
fonte