[英]jQuery UI How to Open a Dialog, append to a div not the body
我在这里使用这个简单的模态对话框示例: http : //jqueryui.com/demos/dialog/modal-form.html
当页面加载时,jQuery从DOM中删除对话框的div。 单击按钮打开对话框时,jQuery会将对话框的div附加到body元素的末尾。
我想把它附加到某个div,而不是身体。 原因是我在页面上有一个大表单,并且在对话框中是单个文件输入(没有单独的表单)。 我想在对话框中保存我的文件输入,其形式与页面上其他字段相同(不在对话框中)。
是否可以将对话框附加到给定的div或元素?
这是一个旧线程,但万一有人(像我一样)将来遇到它,我认为值得注意的是,从1.10.0开始,jQuery UI提供了appendTo选项:
$("#myDialogue").dialog({
appendTo: "#DesiredDivID"
});
我昨天刚刚解决了这个问题。 我解决它的方法是在表单的底部插入一个空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" );
}
}
});
这样的ModalDialogs旨在不干扰现有的DOM,因此只有它们被附加在body
而不是您配置添加位置。
对于您的特定用途,我建议在关闭时找到Dialog中的form inputs
,克隆它们并将它们附加到表单中。 当您将type=text
插入表单时,可能需要将type=text
转换为type=hidden
。 这样,您就可以使用普通表单提交提交的数据。
快乐的编码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.