如何在对话框中关闭 jQuery 对话框？答案

【问题标题】：How to close jQuery Dialog within the dialog?如何在对话框中关闭 jQuery 对话框？
【发布时间】：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>

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案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();

【讨论】：