jQuery UI 如何打开对话框，将其附加到 div 而不是 body

Question

我在这里使用了一个简单的模态对话框示例： http://jqueryui.com/demos/dialog/modal-form.html 当页面加载时，jQuery将对话框的div从DOM中删除。当单击按钮以打开对话框时，jQuery会将对话框的div附加到body元素的末尾。

我想将它附加到特定的div而不是body。原因是我在页面上有一个大表单，在对话框中只有一个文件输入（没有单独的表单）。我希望在页面的其他字段（不在对话框中）与同一表单中保留我的文件输入。

是否可以将对话框附加到给定的div或元素？

- RandomCoder

---

你应该考虑使用某种异步上传方式。 - Z. Zlatev

Answer 1

这是一个旧的帖子，但如果有人（像我自己）在未来遇到它，我认为值得注意的是，从1.10.0开始，jQuery UI提供了appendTo选项：

$("#myDialogue").dialog({
  appendTo: "#DesiredDivID"
});

API文档链接

- gerry

---

<3 我爱你 <3 你刚刚拯救了这一天！ - Kiwy

Answer 2

我昨天刚刚解决了这个问题。我解决的方法是在表单底部插入一个空的 div (<div id="bottomOfForm"></div>)，然后在关闭对话框时，将其内容移动到该 div 中。 在我这个例子中，代码大致如下：

        // Setup up dialogue box that contains some form fields:    
        $j("#myDialogue").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Submit": function() {
                    // Move to main form so fields get included:
                    $j(this).parent().prependTo($j("#bottomOfForm"));
                    // Submit the main form:
                    $j('#mainForm').submit();
                },
                Cancel: function() {
                    $j(this).dialog( "close" );
                }
            }
        });

- benb

Answer 3

这种ModalDialogs的设计是为了不干扰现有的DOM，因此它们只会添加到body中，而不需要你配置它们添加的位置。

对于您的具体用途，我建议在Dialog关闭时从中查找form inputs，克隆它们并将它们附加到您的表单中。当您将它们插入您的表单时，您可能想将type=text转换为type=hidden。这样，您可以通过正常的表单提交获取那些数据。

祝编码愉快。

- simplyharsh