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" });

您可以阅读here

Answer 2

来自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');

Answer 3

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

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

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

Answer 4

您可以使用jquery的append方法。

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

控制jquery UI对话框的DOM位置

4 个答案: