ASP.NET Hosting - How to Hide jQuery Dialog Modal Popup after AJAX Call Success ?

This post is about How to Hide jQuery Dialog Modal Popup after AJAX Call Success.

HTML Markup
The below HTML Markup consists of an HTML DIV containing a TextBox to enter some content, a Button for triggering jQuery AJAX call.
<div id="dialog" style="display: none">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
        Name:
    </td>
    <td>
        <input type="text" id="txtName" value="" />
    </td>
</tr>
<tr>
    <td colspan="2" align="center">
        <img id="imgLoader" alt="" src="loading.gif" style="visibility: hidden" />
    </td>
</tr>
<tr>
    <td colspan="2" align="right">
        <input type="button" id="btnSubmit" value="Submit" />
    </td>
</tr>
</table>
</div>
The WebMethod
In order to illustrate the functioning, an ASP.Net WebMethod is used which will accept a string value and will simply return Boolean value True in response. A delay of two seconds has been added to experience the process as otherwise the jQuery UI Modal Popup box will hide instantly.

Note: This solution is not restricted only to ASP.Net and it can be easily used for other technologies too.

[System.Web.Services.WebMethod]
public static bool SubmitDetails(string name)
{
//Fake Delay.
System.Threading.Thread.Sleep(2000);
return true;
}

How to Hide jQuery Dialog Modal Popup after AJAX Call Success ?

Inside the jQuery document ready event handler, the jQuery UI Dialog Modal Popup plugin is applied to the HTML DIV and the jQuery UI Dialog Modal Popup box is shown. When the Button is clicked a jQuery AJAX call is made to the WebMethod and the Loading GIF image is displayed.
Once the response is received then inside the success event handler, the jQuery UI Dialog Modal Popup box is closed (hidden).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
    autoOpen: true,
    modal: true,
    title: "Submit Details"
});
$("#btnSubmit").click(function () {
    $("#imgLoader").css("visibility", "visible");
    $.ajax({
        type: "POST",
        url: "Default.aspx/SubmitDetails",
        data: "{name: '" + $("#txtName").val() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {
            $("#imgLoader").css("visibility", "hidden");
            $("#dialog").dialog("close");
        }
    });
});
});
</script>