How to close jQuery Dialog within the dialog?

问题

How to close jQuery Dialog within the dialog without using the close button?

Inside the ui dialog is a simply form request and if a successful submission occurs, then the ui dialog automatically closes and refreshes the parent page.

    <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

回答1:

Try This

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

It will close the dialog inside it.

回答2:

you can close it programmatically by calling

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

whenever you want.

回答3:

You need

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

回答4:

Close from iframe inside a dialog:

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

回答5:

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

Simple, I like to make sure I don't:

1. hardcode dialog #id values.
2. Close all dialogs.

回答6:

After checking all of these answers above without luck, the folling code worked for me to solve the problem:

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

Maybe this will be also a good try if you seek for alternatives.

回答7:

replace one string to

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

$(this) here means another object $("#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:

Adding this link in the open

$(this).parent().appendTo($("form:first"));

works perfectly.

回答9:

        $(document).ready(function () {
            $("#form-dialog").dialog({
                autoOpen: true,
                modal: true,
                width: 200,
                draggable: true,
                resizable: true,
                buttons: {
                    "Close": function () {
                        $("#idDialog").dialog("close");
                    }
                }
            });
        });

This will make you a button to close. you can also call the function close

$("#idDialog").dialog("close");

in some function to do this. or even in a button/a

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

EDIT: you need this to include your dialog into form:

open: function (type, data) {
            $(this).parent().appendTo($("form:first"));
        }

回答10:

better way is "destroy and remove" instead of "close" it will remove dialog's "html" from the DOM

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

回答11:

Using $(this).dialog('close'); only works inside the click function of a button within the modal. If your button is not within the dialog box, as in this example, specify a selector:

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

For more information, see the documentation

来源：https://stackoverflow.com/questions/2933826/how-to-close-jquery-dialog-within-the-dialog