控制jquery UI对话框的DOM位置

I'm trying to create a jQueryUI Dialog and have it insert itself into the dom within a specific element. We have a content section that is the parent of a number of styles so items within the dialog are not styled since jqueryUI does an append to body. Is there a way to tell jqueryUI to append to a selector of my choosing?

我正在尝试创建一个jQueryUI对话框，并将其插入到特定元素中的dom中。我们有一个内容部分，它是许多样式的父级，因此对话框中的项目没有样式化，因为jqueryUI会附加到正文。有没有办法告诉jqueryUI追加到我选择的选择器？

What it does

它能做什么

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

what I want

我想要的是

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

4 个解决方案

#1

I know this question is a little old but I wanted to make sure any new comers were pointed in the right direction. The option "appendTo" was added in version 1.10.0.

我知道这个问题有点老了，但我想确保任何新来的人指向正确的方向。版本1.10.0中添加了“appendTo”选项。

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

You can read about it here

你可以在这里读到它

#2

From Custom CSS scope and jQuery UI dialog themes

来自Custom 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

This link maybe of some use.
But the thing you'd like to achieve seems to me a bit against the model of jQuery UI library. You can style the dialog using the CSS classes specified in the Theme tab on this page.
If you can transfer the id of the element, you want to make into a dialog, to a class, you can use the following code

这个链接可能有些用处。但是你想要实现的东西在我看来有点违背了jQuery UI库的模型。您可以使用此页面上“主题”选项卡中指定的CSS类来设置对话框的样式。如果你可以转移元素的id，你想进入一个对话框，你可以使用以下代码

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

and you should update your CSS to reflect the change. Thus you do not introduce duplicate id-s (which may lead to problems in future work and is semantically incorrect), if you duplicate the #content tag inside the dialog content

并且您应该更新CSS以反映更改。因此，如果在对话框内容中复制#content标记，则不会引入重复的id-s（这可能会导致将来的工作出现问题并且在语义上不正确）

#4

-1

You can use jquery's append method.

您可以使用jquery的append方法。

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

#1