Javascript jQuery UI 如何打开对话框，附加到 div 而不是正文
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6028169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI How to Open a Dialog, append to a div not the body
提问by RandomCoder
I'm using this simple modal dialog example here: http://jqueryui.com/demos/dialog/modal-form.html
我在这里使用这个简单的模态对话框示例：http: //jqueryui.com/demos/dialog/modal-form.html
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.
当页面加载时，jQuery 从 DOM 中删除对话框的 div。当单击按钮打开对话框时，jQuery 将对话框的 div 附加到 body 元素的末尾。
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 或元素？
采纳答案by benb
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:
昨天我自己解决了这个问题。我解决它的方法是在表单底部插入一个空的 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" );
}
}
});
回答by gerry
It's an old thread but in case someone (like myself) comes across it in the future, I think it's worth noting that from 1.10.0 on jQuery UI offers the appendTo option:
这是一个旧线程，但如果将来有人（像我一样）遇到它，我认为值得注意的是，jQuery UI 上的 1.10.0 提供了 appendTo 选项：
$("#myDialogue").dialog({
appendTo: "#DesiredDivID"
});
回答by simplyharsh
Such ModalDialogs are designed to not interfere in the existing DOM, so only they are appended in the bodyrather than you configuring where to add.
此类 ModalDialogs 旨在不干扰现有 DOM，因此仅将它们附加到 DOM 中，body而不是您配置添加位置。
For your specific use, I would suggest to find the form inputsfrom Dialog when it is closed, clone them and append them to your form. You might want to convert type=textto type=hiddenwhen you insert them into your form. That way, you can get that data submitted
with normal form submit.
对于您的特定用途，我建议在form inputs关闭对话框时找到它，克隆它们并将它们附加到您的表单中。您可能希望在将它们插入表单时转换type=text为type=hidden。这样，您就可以通过普通表单提交来提交数据。
Happy Coding.
快乐编码。
