控制 jquery UI 对话框的 DOM 位置答案

【问题标题】：Controlling the DOM location of a jquery UI dialog控制 jquery UI 对话框的 DOM 位置
【发布时间】：2012-01-19 20:18:18
【问题描述】：

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

它的作用

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

我想要什么

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

【问题讨论】：

$(".selector").dialog({ appendTo: "#someElem" });是您正在寻找的...请参阅下面的答案。

标签： jquery-ui jquery-ui-dialog

【解决方案1】：

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

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

你可以阅读它here

【讨论】：

非常简洁的解决方案，您为我节省了大量可能的代码重构。

【解决方案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');

【讨论】：

请注意，如果.myCustomScope 将overflow: 设置为自动、隐藏或滚动，则对话框将受到影响，因为它是该元素的子元素。
接受更新的答案，因为它现在是一个更好的解决方案

【解决方案3】：

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

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

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

【讨论】：

这不是我想要设置样式的对话框，而是我想要设置样式的对话框中的表单字段、部分、标签、字段集等，现在它们设置如下 #content fieldset label {styles但由于 jqueryUI 将它创建的 dom 元素附加到 body 它不再“在”#content 下，并且样式不能正确级联
是的，这就是我的意思，您可以将#content 更改为.ui-dialog-content，这样就可以了。如果#content 中有字段集，其样式应与对话框中显示的相同，您始终可以执行#content fieldset label, .ui-dialog-content fieldset label {styles} 之类的操作
总共有大约 30 或 40 种样式从 #content 级联，我宁愿不必重复所有内容，也可以像这样嵌套在 .ui-dialog-content 下“,.ui-对话框内容表单字段集部分输入”等
关于我的问题，是否可以让 jquery 附加到 body 以外的特定 dom 元素
是的，这很糟糕。我能想到的唯一优化是如果您可以省略表达式的 #content 部分 - 这可能会有所帮助。

【解决方案4】：

你可以使用jquery的append方法。

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

【讨论】：

我认为你不明白这里发生了什么。当您调用 $('#mydialog').dialog() 时，jquery 会克隆您的内容以构建一个新 div，然后将其附加到 'body' 从而破坏级联
如果这是您想要的，您可以在创建对话框时存储对对话框上一个父级的引用，然后在关闭时将对话框移回。
这与对话框何时关闭无关，而是它打开时的父项错误。