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>

you can close it programmatically by calling

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

whenever you want.

Try This

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

It will close the dialog inside it.

You need

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

Close from iframe inside a dialog:

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

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

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>

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

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

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

Adding this link in the open

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

works perfectly.

If you're using jconfirm the way of closing it programatically is the following:

jconfirm.instances[0].close();

It helped me:

$(".ui-dialog-titlebar-close").trigger('click');