控制 jquery UI 对话框的 DOM 位置

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

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

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

您可以在此处阅读

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

Answer 3

此链接也许有用。
但在我看来，您想要实现的目标有点违背 jQuery UI 库的模型。您可以使用此页面上的“主题”选项卡中指定的 CSS 类来设置对话框的样式。
如果您可以将要制作为对话框的元素的 id 传输到类，则可以使用以下代码

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

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

Answer 4

您可以使用 jquery 的 append 方法。

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