In this article I will explain with an example, how to close (hide) jQuery UI Modal Popup box after AJAX Call is successful (completed).
 
 
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;
}
 
 
jQuery UI dialog(‘close’) not working after AJAX call
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>
 
 
Screenshot
jQuery UI dialog(‘close’) not working after AJAX call
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code