[jquery] How to close jQuery Dialog within the dialog?

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

Inside the Dialog is a simple form request. 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>

        $(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"));
        }

$(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.

Close from iframe inside a dialog:

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

You need

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

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.

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>

Adding this link in the open

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

works perfectly.

you can close it programmatically by calling

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

whenever you want.

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

Try This

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

It will close the dialog inside it.

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();