如何在对话框中关闭 jQuery 对话框？
Posted
技术标签:
【中文标题】如何在对话框中关闭 jQuery 对话框？【英文标题】：How to close jQuery Dialog within the dialog? 【发布时间】：2011-02-25 09:42:00 【问题描述】：如何在不使用关闭按钮的情况下关闭对话框内的 jQuery Dialog？
Dialog 内部是一个简单的表单请求。如果提交成功，则 UI 对话框会自动关闭并刷新父页面：
<script type="text/javascript">
$(document).ready(function ()
$("#form-dialog").dialog(
autoOpen: true,
modal: true,
width: 200,
draggable: true,
resizable: true
);
);
</script>
<div id="form-dialog" title="Form Submit">
<form action="default.aspx" method="post">
<input type="text" name="name" value=" " />
<input type="submit" value="submit" />
<a href="#" id="btnDone">CLOSE</a>
<script type="text/javascript">
$(document).ready(function ()
$("#btnDone").click(function ()
$(this).dialog('close');
);
);
</script>
</form>
</div>
【问题讨论】：
【参考方案1】：您可以通过调用以编程方式关闭它
$('#form-dialog').dialog('close')
随时随地。
【讨论】：
但是form标签在ui对话框里面。 ui 对话框中没有 jquery 文件，只是一个普通的表单标签提交。如何在#form-dialog 中使用 $('#form-dialog').close()？这就像在您单击某物后自行关闭或在 ui 对话框中发生等待计时器。 如果您使用jquery打开对话框，您可以使用jquery关闭它。在声明对话框的正下方的行中，设置$('#mySubmitButton').live('click', function() mySubmitFunction(); $('#form-dialog').close(); );
是的，但是当我在对话框中时呢？我认为这相当于 $(window).unload() 弹出窗体自动关闭而不是单击 jquery-ui-dialog 关闭按钮。
老兄。你怎么知道用户何时完成了你的表单？在任何时候，调用$('#form-dialog').close()
这行不通....你需要 $('selector').dialog('close') 只是 .close 行不通【参考方案2】：
试试这个
$(this).closest('.ui-dialog-content').dialog('close');
它会关闭里面的对话框。
【讨论】：
当你有动态 html 而不是对元素的引用时很好【参考方案3】：你需要
$('selector').dialog('close');
【讨论】：
嗨redsquare，我在上面的代码中添加了几行，我可以知道为什么它不会关闭对话框吗？如您所见，关闭按钮位于 ui-dialog 内。谢谢。 因为在您的情况下，这指的是按钮而不是对话框 将 $(this) 更改为 $("#form-dialog")【参考方案4】：在对话框内从 iframe 关闭：
window.parent.$('.ui-dialog-content:visible').dialog('close');
【讨论】：
【参考方案5】：$(this).parents(".ui-dialog-content").dialog('close')
简单，我想确保我不这样做：
-
硬编码对话框#id 值。
关闭所有对话框。
【讨论】：
【参考方案6】：在没有运气检查了上面所有这些答案之后，以下代码为我解决了问题：
$(".ui-dialog").dialog("close");
如果您寻求替代方案，也许这也是一个很好的尝试。
【讨论】：
【参考方案7】：将一个字符串替换为
$("#form-dialog").dialog('close');
这里的$(this) 表示另一个对象$("#btnDone")
<script type="text/javascript">
$(document).ready(function ()
$("#form-dialog").dialog(
autoOpen: true,
modal: true,
width: 200,
draggable: true,
resizable: true
);
);
</script>
<div id="form-dialog" title="Form Submit">
<form action="default.aspx" method="post">
<input type="text" name="name" value=" " />
<input type="submit" value="submit" />
<a href="#" id="btnDone">CLOSE</a>
<script type="text/javascript">
$(document).ready(function ()
$("#btnDone").click(function ()
//I've replaced next string
// $(this) here means another object $("#btnDone")
$("#form-dialog").dialog('close');
);
);
</script>
</form>
</div>
【讨论】：
【参考方案8】：使用$(this).dialog('close'); 仅适用于模态框内按钮的单击功能。如果您的按钮不在对话框中，如本例所示，请指定一个选择器：
$('#form-dialog').dialog('close');
有关详细信息，请参阅documentation
【讨论】：
【参考方案9】：更好的方法是“销毁并删除”而不是“关闭” 它将从 DOM 中删除对话框的“html”
$(this).closest('.ui-dialog-content').dialog('destroy').remove();
【讨论】：
【参考方案10】：在打开的时候添加这个链接
$(this).parent().appendTo($("form:first"));
完美运行。
【讨论】：
【参考方案11】：
$(document).ready(function ()
$("#form-dialog").dialog(
autoOpen: true,
modal: true,
width: 200,
draggable: true,
resizable: true,
buttons:
"Close": function ()
$("#idDialog").dialog("close");
);
);
这将使您成为关闭按钮。你也可以调用函数close
$("#idDialog").dialog("close");
在某些函数中执行此操作。甚至在一个按钮/a中
< a href="javascript:void(0);" id="btnDone"
onClick="$("#idDialog").dialog("close");">CLOSE</a>
编辑： 你需要这个来将你的对话框包含在表单中：
open: function (type, data)
$(this).parent().appendTo($("form:first"));
【讨论】：
【参考方案12】：如果您使用jconfirm，则以编程方式关闭它的方式如下：
jconfirm.instances[0].close();
【讨论】：
以上是关于如何在对话框中关闭 jQuery 对话框？的主要内容，如果未能解决你的问题，请参考以下文章