jQuery UI如何打开对话框，附加到div而不是正文 [英] jQuery UI How to Open a Dialog, append to a div not the body

问题描述

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

I'm using this simple modal dialog example here: http://jqueryui.com/demos/dialog/modal-form.html

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

When the page loads, jQuery removes the dialog's div from the DOM. When the button is clicked to open the dialog, jQuery appends the dialog's div to the end of the body element.

我想将其附加到某个div，而不是正文.原因是我在页面上有一个大表格，并且对话框中是一个文件输入(没有单独的表格).我想将文件输入保存在对话框中，格式与页面上其余字段的格式相同(不在对话框中).

I want to append it to a certain div, not the body. The reason is I have a large form on the page, and in the dialog is a single file input (no seperate form). I want to keep my file input in the dialog, within the same form as the rest of the fields on the page (which aren't in the dialog).

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

Is it possible to append the dialog to a given div or element?

推荐答案

昨天刚刚解决了这个问题.我解决的方法是在窗体(<div id="bottomOfForm"></div>)的底部插入一个空div，然后在关闭对话框时将其内容移动到该div中. 就我而言，代码是这样的:

Just tackled this myself yesterday. The way I solved it was to insert an empty div at the bottom of the form (<div id="bottomOfForm"></div>) then when closing the dialogue, move it's contents into that div. In my case, the code was something like this:

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

这篇关于jQuery UI如何打开对话框，附加到div而不是正文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！