Come posso posizionare il mio dialogo jQuery per centrare?

Question

Ho provato seguente codice, ma solo le posizioni finestre lasciate posizione in alto al centro, e che rende elemento da allineare a destra. Come posso centrare finestra al centro vero e proprio, che conta gli elementi di larghezza, in modo che la linea centrale taglierà finestra al 50% 50% halfs?

$('.selector').dialog({ position: 'center' });

http://docs.jquery.com/UI/Dialog#option-position

Answer 1

Sono abbastanza sicuro che non dovrebbe essere necessario impostare una posizione:

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

dovrebbe centrare per default .

Ho avuto uno sguardo a questo articolo, e anche controllato quello che dice sulla jquery ufficiale sito -ui di posizionare una finestra : e in essa sono state discusse 2 stati di:. inizializzare e dopo inizializzazione

Esempi di codice - (tratto da jQuery UI 2009-12-03)

inizializzare una finestra di dialogo con l'opzione posizione specificata.

$('.selector').dialog({ position: 'top' });

ottenere o impostare l'opzione di posizione, dopo init.

//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');

Credo che se si dovesse rimuovere la posizione di attributo si troverebbero centra da sola altra cosa provare la seconda opzione setter in cui si definiscono 3 elementi di "opzione" "posizione" e "centro".

Answer 2

L'ultima jQuery UI ha una componente di posizione:

$("#myDialog").position({
   my: "center",
   at: "center",
   of: window
});

Doc: http://jqueryui.com/demos/position/
Ottenere: http://jqueryui.com/download

Answer 3

Poiché la finestra di dialogo ha bisogno di una posizione, è necessario includere nella posizione js

<script src="jquery.ui.position.js"></script>

Answer 4

Quindi, se qualcuno colpisce questa pagina come ho fatto io, o per quando mi dimentico in 15 minuti, sto usando jQueryUI dialogo versione 1.10.1 e jQuery 1.9.1 con IE8 in un iframe (bla), e ha bisogno di un all'interno specificato o non funziona, vale a dire

position: {
 my: "center bottom",
 at: "center top",
 of: $("#submitbutton"),
 within: $(".content")
}

Grazie a @ vm370 per avermi nella giusta direzione.

Answer 5

open: function () {

    var win = $(window);

    $(this).parent().css({
        position: 'absolute',
        left: (win.width() - $(this).parent().outerWidth()) / 2,
        top: (win.height() - $(this).parent().outerHeight()) / 2
    });
}

Answer 6

Per fissare in posizione centrale, io 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)
    });
}

Answer 7

Prova questo ....

$(window).resize(function() {
    $("#dialog").dialog("option", "position", "center");
});

Answer 8

sto ottenendo i risultati migliori per mettere dialogo jQuery nel centro della finestra di browser con:

position: { my: "center bottom", at: "center center", of: window },

Non c'è modo probabilmente più accurato per posizionarlo con l'opzione " con ", come descritto nella documentazione all'indirizzo http://api.jqueryui.com/position/ ma sono di fretta ...

Answer 9

Devo chiamare la funzione dialog() due volte per posizionare la finestra di dialogo (jQuery v1.11.2 / jQueryUI v1.10.4).

$("#myDialog").dialog({
    /* initial dialog parameters */
}).dialog({
    position: {
        my: "center center",
        at: "center center",
        of: window
    }
});

Answer 10

parametro di posizione seguito ha lavorato per me

position: { my: "right bottom", at: "center center", of: window },

In bocca al lupo!

Answer 11

Jquery UI 1.9.2, jQuery e le versioni successive don' supporto IE8

Ho trovato due soluzioni per questo.

1. Ripristino di jquery UI 1.7.2 per sostenere IE8,

2. Prova questo codice con Jquery UI 1.9.2

position: {my: "center",  at: "center", of: $("body"),within: $("body") }

Answer 12

In base alla seguente discussione, il problema potrebbe essere dovuto a meno compatibilità di IE nelle versioni più recenti di jQuery, di ritornare alla 1.7.2 sembra risolvere il problema, che si verifica solo in IE8. http://forum.jquery.com / topic / jquery-ui-dialogo-posizionamento-non-lavoro-in-iE-8

Answer 13

Un'altra cosa che si può dare l'inferno con il posizionamento JQuery dialogo, soprattutto per i documenti di dimensioni superiori al porto vista del browser - è necessario aggiungere la dichiarazione

<!DOCTYPE html>

Nella parte superiore del documento.

Senza di essa, jquery tende a mettere la finestra nella parte inferiore della pagina e gli errori possono verificarsi quando si tenta di trascinarlo.

Answer 14

Se si utilizzano i file jQuery singoli o un jquery scaricare personalizzato in entrambi i casi assicurarsi di avere anche jquery.ui.position.js aggiunto alla tua pagina.

Answer 15

Sei in esecuzione in questo in solo IE? Se è così, provate ad aggiungere questo per la prima linea di tag HEAD della tua pagina:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Ho avuto però che tutti i problemi di compatibilità sono state fissate nel jQueries tardi, ma mi sono imbattuto in questo oggi.

Answer 16

Prova questo per le versioni precedenti e qualcuno che non vogliono utilizzare posizione:

$("#dialog-div-id").dialog({position: ['center', 'top'],....

Answer 17

È inoltre necessario fare manuale di ricentraggio se si utilizza jQuery UI su dispositivi mobili - la finestra è posizionato manualmente tramite una proprietà css 'left & top'. se l'utente passa orientamento, il posizionamento non è più centrato, e deve essere adattata / ri-centrata in seguito.

Answer 18

Per l'ambiente Win7 / IE9 appena impostata nel file css:

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

Answer 19

Ho avuto un problema con questo e alla fine ho capito questo. Fino ad oggi ho usato una versione veramente vecchio di jQuery, la versione 1.8.2.

Ovunque dove avevo usato dialog avevo inizializzato con la seguente opzione di posizione:

$.dialog({
    position: "center"
});

Tuttavia, ho trovato che la rimozione position: "center" o la sua sostituzione con la sintassi corretta non ha fatto il trucco, per esempio:

$.dialog({
    position: {
       my: "center",
       at: "center",
       of: window
    }
});

Anche se quanto sopra è corretto, mi è stato anche utilizzando option per impostare la posizione di centrale quando ho caricato nella pagina, alla vecchia maniera, in questo modo:

// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");

Questo stava causando tutti i miei finestre di dialogo a bastone in alto a sinistra della porta di vista.

ho dovuto sostituire tutte le istanze di questo con la nuova sintassi corretta di seguito:

passwordDialogInstance.dialog(
    "option",
    "position", 
    { my: "center", at: "center", of: window }
);

Answer 20

ho fissato con i CSS:

.ui-dialog .ui-dialog-content {
  width: 975px!important;
  height: 685px!important;
  position: fixed;
  top: 5%;
  left: 50%;
  margin:0 0 0 -488px;
}

Answer 21

Impossibile ottenere IE9 per centrare la finestra di dialogo.

fissi con l'aggiunta di questo al css:

.ui-dialog {
    left:1%;
    right:1%;
}

Percentuale non importa. Qualsiasi numero piccolo ha funzionato.