logo标签列表

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

jqueryjquery-uijquery-ui-dialog
68

如何在不使用关闭按钮的情况下，通过对话框内部来关闭jQuery对话框？

对话框内部有一个简单的表单请求。如果提交成功，则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>
14个回答
73

您可以通过编程的方式调用来关闭它。

$('#form-dialog').dialog('close')

你想什么时候做就什么时候做。

如果您正在使用jQuery打开对话框，那么您可以使用jQuery关闭它。在声明对话框的下一行中，设置$('#mySubmitButton').live('click', function() { mySubmitFunction(); $('#form-dialog').close(); });。 - Jason
1
是的，但当我在对话框内部时怎么办？ 我认为相当的方法是类似于$(window).unload()，其中弹出式窗体会自动关闭而不是单击jquery-ui-dialog的关闭按钮。 - imperialx
兄弟，你怎么知道用户何时完成了你的表单？无论是在任何时候，都要调用 $('#form-dialog').close()。 - Jason
1
这样是行不通的...你需要使用$('selector').dialog('close')，只有.close是不起作用的。 - redsquare
呃...是的，就像@redsquare所说的那样。 - Jason
显示剩余2条评论
70

试试这个

$(this).closest('.ui-dialog-content').dialog('close');

它将关闭其中的对话框。

当您拥有动态HTML而不是元素引用时，这非常好。 - Stefan Pintilie
19
你需要
$('selector').dialog('close');
嗨，redsquare，我在我的代码上添加了几行，想问一下为什么它不会关闭对话框？正如您所看到的，关闭按钮位于ui-dialog内。谢谢。 - imperialx
因为在您的情况下，这指的是按钮而不是对话框。 - redsquare
将$(this)更改为$("#form-dialog")。 - redsquare
14

关闭对话框中的 iframe：

window.parent.$('.ui-dialog-content:visible').dialog('close');
8
$(this).parents(".ui-dialog-content").dialog('close')

简单来说，我希望确保以下几点：

  1. 不要将对话框的#id值硬编码。
  2. 不要关闭所有对话框。
5

在没有找到解决方案的情况下，以下代码对我有效：

$(".ui-dialog").dialog("close");

也许这也是一个不错的尝试，如果你正在寻找替代方案。
3

将一个字符串替换为另一个字符串

$("#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>
2

只有在模态框中的按钮的点击函数内使用$(this).dialog('close');才有效。如果您的按钮不在对话框框中，例如此示例中，则需指定选择器：

$('#form-dialog').dialog('close');

更多信息，请参见文档

。

1
更好的方式是使用“销毁和移除”而不是“关闭”，这将从DOM中移除对话框的“html”。
$(this).closest('.ui-dialog-content').dialog('destroy').remove();
0

        $(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 href="javascript:void(0);" id="btnDone"   
                              onClick="$("#idDialog").dialog("close");">CLOSE</a>

编辑： 您需要将此内容包含在表单中以便进行对话：

open: function (type, data) {
            $(this).parent().appendTo($("form:first"));
        }
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接