Controllo della posizione DOM di una finestra di dialogo dell'interfaccia utente jquery

Question

Sto provando a creare una finestra di dialogo jQueryUI e inserirla nella dom all'interno di un elemento specifico. Abbiamo una sezione di contenuto che è l'elemento principale di un numero di stili, quindi gli elementi all'interno della finestra di dialogo non sono in stile poiché jqueryUI esegue un'appendice al corpo. C'è un modo per dire a jQueryUI di aggiungere un selettore di mia scelta?

Ciò che fa

<section id="content"> 
</section> 
<div class="dialog"> the dialog </div> 

quello che voglio

<section id="content"> 
<div class="dialog"> the dialog </div> 
</section> 

Answer 1

So che questo la domanda è un po 'vecchia ma volevo assicurarmi che tutti i nuovi arrivati ​​fossero puntati nella giusta direzione. L'opzione "appendTo" è stata aggiunta nella versione 1.10.0.

$(".selector").dialog({ appendTo: "#someElem" }); 

Si può leggere su di esso here

Answer 2

È possibile utilizzare il metodo di jQuery append.

$('#content').append('<div class="dialog"> the dialog </div>'); 

Answer 3

This link forse di qualche utilità.
Ma la cosa che vorresti ottenere mi sembra un po 'contraria al modello della libreria di jQuery UI. È possibile ridimensionare la finestra di dialogo utilizzando le classi CSS specificate nella scheda Tema su this page.
Se è possibile trasferire l'id dell'elemento, si vuole fare in una finestra di dialogo, a una classe, è possibile utilizzare il seguente codice

$(".dialog").dialog({ dialogClass: 'content' }); 

e si dovrebbe aggiornare il CSS per riflettere il cambiamento. Così non si introducono duplicato id-s (che può portare a problemi nel lavoro futuro e è semanticamente corretto), se si duplica il tag #content all'interno della finestra di contenuti

Answer 4

Da Custom CSS scope and jQuery UI dialog themes

// Create the dialog, but don't open it yet 
var d = $('#myDialogContents').dialog({ 
    autoOpen: false 
    // other dialog options 
}); 
// Take whole dialog and put it back into the custom scope 
d.parent('.ui-dialog').appendTo('.myCustomScope'); 
// Open the dialog (if you want autoOpen) 
d.dialog('open');