Управление расположением DOM диалогового окна jquery UI

Question

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

Что он делает

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

что я хочу

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

Answer 1

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

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

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

Answer 2

С Пользовательские темы CSS и диалоговые темы интерфейса jQuery

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

Answer 3

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

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

, и вы должны обновить свой CSS, чтобы отразить изменение.Таким образом, вы не вводите дубликаты идентификаторов (которые могут привести к проблемам в дальнейшей работе и семантически неверны), если вы дублируете тег #content внутри содержимого диалога

Answer 4

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

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