如何在对话框中关闭jQuery Dialog?

时间:2010-05-29 04:45:17

标签: jquery jquery-ui jquery-ui-dialog

如何在不使用关闭按钮的情况下关闭对话框中的jQuery Dialog?

在ui对话框中是一个简单的表单请求,如果成功提交,则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>

-imperialx

12 个答案:

答案 0 :(得分:67)

试试这个

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

它将关闭其中的对话框。

答案 1 :(得分:60)

您可以通过调用

以编程方式关闭它
$('#form-dialog').dialog('close')

随时随地。

答案 2 :(得分:16)

你需要

$('selector').dialog('close');

答案 3 :(得分:8)

从对话框中的iframe关闭:

window.parent.$('.ui-dialog-content:visible').dialog('close');

答案 4 :(得分:7)

$(this).parents(".ui-dialog-content").dialog('close')

很简单,我想确保不这样做:

  1. 硬编码对话框#id值。
  2. 关闭所有对话框。

答案 5 :(得分:4)

在没有运气的情况下检查了上述所有答案之后,下面的代码对我有用,可以解决问题:

class Parent
{
  componentWillMount () {
    console.log('parent componentWillMount');
  }
}

class Child extends Parent
{
  componentWillMount () {
    console.log('child componentWillMount');
  }
}

如果你寻求替代方案,也许这也是一个很好的尝试。

答案 6 :(得分: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>

答案 7 :(得分:1)

使用$(this).dialog('close');仅在模式中按钮的单击功能内起作用。如果您的按钮不在对话框中(如本例所示),请指定一个选择器:

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

有关更多信息,请参见documentation

答案 8 :(得分:0)


        $(document).ready(function () {
            $("#form-dialog").dialog({
                autoOpen: true,
                modal: true,
                width: 200,
                draggable: true,
                resizable: true,
                buttons: {
                    "Close": function () {
                        $("#idDialog").dialog("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"));
        }

答案 9 :(得分:0)

在开放

中添加此链接
$(this).parent().appendTo($("form:first"));

完美无缺。

答案 10 :(得分:0)

更好的方法是“销毁并删除”,而不是“关闭” 它将从DOM中删除对话框的“ html”

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

答案 11 :(得分:0)

如果您使用 jconfirm,以编程方式关闭它的方法如下:

jconfirm.instances[0].close();