Controlar la ubicación DOM de un diálogo de la interfaz de usuario de jquery

Question

Estoy tratando de crear un cuadro de diálogo jQueryUI y hacer que se inserte en el dom dentro de un elemento específico. Tenemos una sección de contenido que es el elemento principal de una serie de estilos para que los elementos del cuadro de diálogo no tengan un estilo, ya que jqueryUI hace un apéndice al cuerpo. ¿Hay alguna manera de decirle a jqueryUI que se añada a un selector de mi elección?

Lo que hace

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

lo que quiero

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

Answer 1

Sé que esto La pregunta es un poco vieja, pero quería asegurarme de que cualquier nuevo candidato sea apuntado en la dirección correcta. La opción "appendTo" se agregó en la versión 1.10.0.

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

Usted puede leer sobre él here

Answer 2

puede utilizar el método de jQuery append.

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

Answer 3

This link Quizás de algún uso.
Pero lo que le gustaría lograr me parece un poco en contra del modelo de la biblioteca jQuery UI. Puede aplicar estilos al diálogo utilizando las clases de CSS especificadas en la pestaña Tema en this page.
Si puede transmitir el ID del elemento, que desea convertir en un cuadro de diálogo, a una clase, puede utilizar el siguiente código

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

y se debería actualizar el CSS para reflejar el cambio. Por lo tanto no se introducen duplicado id-s (que puede conducir a problemas en el trabajo futuro y es semánticamente incorrecto), si se duplica la etiqueta #content dentro del contenido de diálogo

Answer 4

De 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');