Question

我在这里使用这个简单的模态对话框示例： http://jqueryui.com/demos/dialog/modal-form.html

当页面加载时，jQuery从DOM中删除对话框的div。单击该按钮打开对话框时，jQuery会将对话框的div附加到body元素的末尾。

我想把它附加到某个div，而不是身体。原因是我在页面上有一个大表单，并且在对话框中是单个文件输入（没有单独的表单）。我希望在对话框中保留我的文件输入，其形式与页面上其他字段相同（不在对话框中）。

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

Answer 1

这是一个老线程但是如果有人（像我一样）将来遇到它，我认为值得注意的是，从1.10.0开始，jQuery UI提供了appendTo选项：

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

link to API docs

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

Answer 3

此类ModalDialog旨在不干扰现有DOM，因此只有它们会附加在body中，而不是您配置添加位置。

对于您的具体用途，我建议在关闭时从Dialog中找到form inputs，克隆它们并将它们附加到您的表单中。将它们插入表单时，您可能希望将type=text转换为type=hidden。这样，您就可以提交该数据正常表格提交。

快乐编码。

jQuery UI如何打开一个对话框，附加到div而不是正文

3 个答案: