Управление расположением DOM диалогового окна пользовательского интерфейса jquery

Я пытаюсь создать диалог jQueryUI и включить его в dom внутри определенного элемента. У нас есть раздел контента, который является родителем нескольких стилей, поэтому элементы в диалоговом окне не оформлены, поскольку jqueryUI добавляет к телу. Есть ли способ сказать jqueryUI добавить к выбранному мной селектору?

Что он делает

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

что я хочу

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

Ответ 1

Я знаю, что этот вопрос немного стар, но я хотел убедиться, что все новые зрители были направлены в правильном направлении. Опция "appendTo" была добавлена в версии 1.10.0.

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

Вы можете прочитать об этом здесь

Ответ 2

Из Пользовательская область CSS и темы диалога jQuery UI

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

Ответ 3

Эта ссылка может быть использована.
Но то, что вы хотели бы достичь, кажется мне немного против модели библиотеки jQuery UI. Вы можете создать диалог, используя классы CSS, указанные на вкладке Тема на этой странице.
Если вы можете передать идентификатор элемента, который хотите сделать в диалоговом окне, в класс, вы можете использовать следующий код

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

и вы должны обновить свой CSS, чтобы отразить это изменение. Таким образом, вы не вводите повторяющиеся id-s (что может привести к проблемам в будущей работе и семантически неверно), если вы дублируете тег #content внутри содержимого диалога

Ответ 4

Вы можете использовать метод jquery добавить.

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