la finestra di dialogo jQuery UI non posizionato centro dello schermo

Question

Ho una finestra di dialogo jQuery che è destinata a posizione nel centro dello schermo. Tuttavia, sembra un po 'fuori centro in verticale.

Ecco il codice:

$('#add_box').dialog({
    autoOpen: true,
    width: 300,
    modal: true,
    resizable: false,
    bgiframe:true
});

Tutte le idee perché questo non centrare?

Answer 1

Se la finestra viene fatta scorrere dopo i display di dialogo, non sarà più centrato. E 'possibile provocare involontariamente la finestra per scorrere con l'aggiunta / rimozione di contenuti dalla pagina. È possibile centrare nuovamente la finestra di dialogo nel corso di scorrimento / ridimensionare gli eventi chiamando:

$('my-selector').dialog('option', 'position', 'center');

Answer 2

Stai aggiungendo jquery.ui.position.js alla tua pagina? Ho avuto lo stesso problema, controllato il codice sorgente qui e si rese conto che non ho aggiungere che js alla mia pagina, dopo che .. dialogo magicamente centrato.

Answer 3

Scavando una vecchia tomba qui, ma per i nuovi ricercatori di Google.

È possibile mantenere la posizione della finestra del modello in cui le utenti scorre con l'aggiunta di questo evento alla tua finestra. Questo cambierà da assolutamente posizionato a fisso. Non c'è bisogno di controllare lo scorrimento eventi.

open: function(event, ui) {
    $(this).parent().css('position', 'fixed');
}

Answer 4

ho avuto lo stesso problema. Alla fine è stato il jquery.dimensions.js plugin. Se ho rimosso, tutto ha funzionato bene. Ho inserito a causa di un altro plugin che ha richiesto, però ho scoperto dal link qui che le dimensioni è stato incluso nel nucleo jQuery un po 'di tempo fa ( http://api.jquery.com/category/dimensions ). Si dovrebbe essere ok semplicemente sbarazzarsi delle dimensioni plugin.

Answer 5

1.) I centri di dialogo jQuery in qualunque elemento lo metti in.

Senza ulteriori informazioni, la mia ipotesi è che si dispone di un div corpo con un margine o qualcosa di simile. Spostare il div pop-up al livello del corpo, e sarete pronti per partire.

2.) Se si aggiungono dinamicamente contenuto al div come si carica, centraggio non saranno corrette. Non visualizzare il div fino a quando si ha la your'e dati mettendo in esso.

Answer 6

È sufficiente aggiungere sotto la linea CSS nella stessa pagina.

.ui-dialog 
{
position:fixed;
}

Answer 7

Per risolvere questo problema ho fatto in modo la mia altezza corpo è stato fissato a 100%.

body { height:100% }

Questo mantiene anche la posizione centrale, mentre l'utente scorre.

Answer 8

Aggiungi questo alla tua dichiarazione di dialogo

my: "center",
at: "center",
of: window

Esempio:

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Answer 9

Per me i jquery.dimensions.js era il colpevole

Answer 10

Questo problema è spesso legato ad aprire la finestra di dialogo tramite un tag di ancoraggio (<a href='#' id='openButton'>Open</a>) e non impedendo il comportamento browser predefinito nel gestore per es.

$('#openButton').click(function(event) {
   event.preventDefault();
   //open dialog code...
});

Questo rimuove generalmente la necessità di qualsiasi intervento di posizionamento / scorrimento plugins.

Answer 11

stavo affrontando lo stesso problema di avere la finestra non si apre centrato e scorrendo la mia pagina verso l'alto. Il tag che sto usando per aprire la finestra di dialogo è un tag di ancoraggio:

<a href="#">View More</a>

Il simbolo sterlina è stata la causa del problema per me. Tutto quello che ho fatto è stato modificare il href nel l'ancora in questo modo:

<a href="javascript:{}">View More</a>

Ora la mia pagina è felice e centrare le finestre di dialogo.

Answer 12

La mia Scenario: ho dovuto scorrere verso il basso a pagina per aprire la finestra su un pulsante di scatto, grazie alla finestra di scorrimento della finestra di dialogo non si apriva in verticale centrale per finestra, stava andando fuori di vista-port .

Ken si è accennato in precedenza, dopo aver impostato sul suo sito web modale eseguire sotto comunicato.

$("selector").dialog('option', 'position', 'center');

Se il contenuto è pre-caricato prima modale si apre solo eseguire questo evento aperto, altrimenti manipolare DOM in evento aperto e quindi eseguire comunicato.

$( ".selector" ).dialog({
open: function( event, ui ) {
//Do DOM manipulation if needed before executing below statement
$(this).dialog('option', 'position', 'center');
}
});

Ha funzionato bene per me e la cosa migliore è che non si include qualsiasi altro plug-in o libreria per farlo funzionare.

Answer 13

appena risolto lo stesso problema, il problema è stato che ho fatto non importato alcuni file js, come widget.js:)

Answer 14

Nessuna delle soluzioni di cui sopra sembrava funzionare per me dato che il mio codice genera dinamicamente due div containting e all'interno di che un'immagine non-cache. La mia soluzione è stata la seguente:

Si prega di notare il 'carico' chiamare IMG, e la 'stretta' parametro nella chiamata finestra di dialogo.

var div = jQuery('<div></div>')
                  .attr({id: 'previewImage'})
                  .appendTo('body')
                  .hide();
var div2 = jQuery('<div></div>')
                  .css({
                      maxWidth: parseInt(jQuery(window).width() *.80) + 'px'
                      , maxHeight: parseInt(jQuery(window).height() *.80) + 'px'
                      , overflow: 'auto'
                  })
                  .appendTo(div);
var img = jQuery('<img>')
                  .attr({'src': url})
                  .appendTo(div2)
                  .load(function() {
                      div.dialog({
                          'modal': true
                          , 'width': 'auto'
                          , close: function() {
                               div.remove();
                          }
                      });
                  });

Answer 15

ho dovuto aggiungere questo alla parte superiore del mio file HTML: <!doctype html>. Non ho bisogno di impostare la proprietà position. Questo è con jQuery 3.2.1. In 1.7.1, che non era necessario.

Answer 16

Questo è come ho risolto il problema, ho aggiunto questa funzione aperta del dialogo:

  open: function () {
                $('.ui-dialog').css("top","0px");                                
                    }

Questo apre ora la finestra nella parte superiore dello schermo, non importa dove la pagina viene fatto scorrere da e in tutti i browser.

Answer 17

per posizionare la finestra di dialogo al centro dello schermo:

$('#my-selector').parent().position({
                    my: "center",
                    at: "center",
                    of: window
});

Answer 18

Ho avuto lo stesso problema, che è stato fissato quando sono entrato l'altezza per il dialogo:

$("#dialog").dialog({
    height: 500,
    width: 800
});

Answer 19

È necessario aggiungere la dichiarazione

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 20

$("#dialog").dialog({
       autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
         my: "center",
         at: "center",
         of: window
})

Questa soluzione funziona, ma solo a causa delle versioni più recenti jQuery ignorando questo completamente e cadere di nuovo al difetto, che è esattamente questo. Così si può semplicemente rimuovere la posizione:. 'Centro' dal opzioni se si desidera solo il pop up per essere centrato