finestra a scorrimento quando finestra jquery apre

Question

Sto cercando di aprire una finestra di dialogo modale jquery utilizzando jQuery 1.4 e jquery-ui-1.8rc3.custom.js

la finestra di dialogo si apre senza problemi, in tutti i browser, ma in IE 7 e 6, dopo che la finestra di dialogo si apre, la finestra si scorre verso il basso ... Ho provato a scorrere la finestra fino alla posizione modale ma è molto incoerente. stava usando la seguente riga di codice dopo l'apertura del modale

window.scrollTo($('#selector').dialog('option', 'position')[0],$('#selector').dialog('option', 'position')[1]); 

Una cosa strana sto notando è che dopo apro il modal, la pagina diventa enorme ... come se alcune cose in più aggiunge fino al in basso .... e alla fine scorre verso il basso. Qualsiasi idea del perché questo potrebbe essere hapenning

in html

<div id="selector"> 
</div> 

in document.ready

$('#selector').dialog({ 
    bgiframe: true, 
    autoOpen: false, 
    width: 100, 
    height: 100, 
    modal: true, 
    position: 'top' 
}); 

in js

$('#selector').dialog('open'); 

Answer 1

Sembra vi manca il # nella vostra selettore:

window.scrollTo($('#selector').dialog('option', 'position')[0], $('#selector').dialog('option', 'position')[1]); 

che potrebbe essere il motivo per cui la finestra sta scorrendo verso l'angolo in alto a sinistra.

---

Edit: Stavo guardando la documentazione e .dialog('option','position') valore predefinito è center.

posizione Tipo: String, array predefinito: 'centro'

specifica dove il dialogo dovrebbe essere visualizzata. Valori possibili: 1) a singola stringa che rappresenta la posizione all'interno di viewport: 'center', 'left', 'right', 'top', 'bottom'. 2) un array contenente una coppia di coordinate x, y nell'angolo sinistro (ad es. [350,100]) 3) un array contenente valori di stringa di posizione x, y (ad esempio ['right', 'top'] per l'angolo in alto a destra ).

Così si potrebbe ottenere di testo o numeri restituiti utilizzando l'opzione di posizione e window.scrollTo() richiede numeri. Quindi provare questo, invece:

var d = $(".ui-dialog").position(); 
window.scrollTo(d.left , d.top); 

Answer 2

Ho avuto una situazione simile in cui la finestra stava aprendo dove dovrebbe sulla pagina, ma l'utente è stato reindirizzato alla parte inferiore della pagina. Fondamentalmente, ho dimenticato di includere il css appropriato per abbinare la libreria JavaScript dell'interfaccia jQuery. Facendo questo tutto era ok. Immagino che sia qualcosa del genere, dove ci sono stili impostati su elementi sul css jQuery che non sono impostati nel tuo css.

Per eseguire il debug del problema in modo non ho avuto per includere l'intero jQuery UI css, ho fatto due pagine identiche, uno che utilizza l'interfaccia utente css jQuery e non uno e appena controllato cosa c'era di diverso nel css via Firebug su Firefox e ho aggiunto questi stili al mio css.

Spero che aiuti. Mag

Answer 3

Anche io stavo lottando con questo problema. Non ho usato alcuna tematizzazione quindi non ho avuto questa importante proprietà CSS:

position:absolute; 

ho aggiunto questo al mio file CSS e tutto funziona bene ora:

.ui-widget { position: absolute; } 

Answer 4

Se stai usando un tag di ancoraggio come qui di seguito per attivare la finestra di

<a href="#" onclick="$(#id).dialog('open');">open dialog</a> 

si vorrà aggiungere un return false; all'attributo onclick:

012.

Ciò impedisce il caricamento della pagina per ancorare # che lo fa saltare in cima.

Answer 5

ho avuto questo problema perché ero Assegnazione di una classe alla finestra di dialogo che nel mio foglio di stile è stato Ambito:

position: relative; 

che è stato sovrascrivendo il:

position: absolute; 

necessari dalla finestra di dialogo.

In sostanza, rendere certo la classe .ui-finestra ha:

position: absolute; 

e la finestra non dovrebbe scorrere fino alla fine della pagina e lo spazio verticale supplementare non verrà aggiunto al corpo.

Answer 6

Come ho riparato:

HTML

<a href="javascript:openDialogFunction(parameters)">...</a> 

Javascript

function openDialogFunction(parameters) { 

    var topOff = $(window).scrollTop(); 

    //code to open the dialog 

    $(window).scrollTop(topOff); 
} 

Answer 7

ho avuto problema simile e questo è il modo ho risolto. È simile alla soluzione @bassim, ma con un sapore leggermente diverso.

Ho avuto lo stesso tag di ancoraggio e utilizzati "$ (# ancora-elemento) .Cliccate (function() {..} Di seguito è riportato il frammento di codice -.

in JSP -

<a id="open-add-comments-${site}" class="open-add-comments" href="#" site-id="${site}" project-id="${project}" >Add comments</a><br/> 

in JavaScript -...

$(".open-add-comments").click(function(){ 

    var projectId=$(this).attr("project-id"); 

    $("#add-comment-form").dialog({ 
     //width: "auto", 
     width: 800, 
     height: "auto", 
     position: "absolute", 
     maxWidth: 800, 
     minWidth: 300, 
     maxHeight: 400, 
     modal: true, 
     title: "Adding comment for \"${project.name}\" and site \""+siteName+"\" ", 
     open: function(event, ui) { 

     $("#add-comment fieldset textarea").html("").focus(); 
      ............ 
      ..... 
     }, 
     buttons: { 
      "Save": function() { 

      .... some business logic 

      }, 
      Cancel: function() { 
       $(this).dialog("close"); 

      } 
     } 

    }); 

    return false; // -- THIS IS IMPORTANT AND RESOLVED THE ISSUE 

}); 

questo ha fatto il trucco e risolto il problema Grazie per riposo in questa pagina che ha dato buone indicazioni e ha contribuito a risolvere il problema di squadra Kudos

Answer 8

Un'altra soluzione è chiamare evento.preventDefault quando la finestra è aperta

$('#demo4').click(function() { 
    $("#tallContent").dialog("open"); 
    event.preventDefault(); 
});