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

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

链接到API文档

Answer 2

我昨天刚刚解决了这个问题.我解决它的方法是在窗体(<div id="bottomOfForm"></div>)的底部插入一个空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" );
                }
            }
        });