Bootstrap modal background won't disappear

Question

So I have this sign in page using Bootstraps modal. However after the call has finished the modal disappears as it should. Except for the black background. How can I make sure that the background disappears as well?

My _Menu.cshtml:

<div id="menu">
    <div class="modal fade" id="form_login" role="dialog" aria-labelledby="form_LoginLabel" aria-hidden="true">
        <div class="modal-dialog reset">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Login</h4>
                </div>

                @using (Ajax.BeginForm("SignIn", "Account", new AjaxOptions() { UpdateTargetId = "menu", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnSuccess="CloseModal()" }, new { @class = "form-inline", @role = "form" }))
                {
                    <div class="modal-body">
                        @if(ViewBag.Message != null)
                        {
                            <p class="alert alert-warning">@ViewBag.Message</p>
                        }

                        <div class="form-group">
                            <label class="sr-only" for="email">Email</label>
                            <input class="form-control" type="email" id="email" name="email" placeholder="Enter email" value="" required="required" />
                        </div>

                        <div class="form-group">
                            <label class="sr-only" for="password">Password</label>
                            <input class="form-control" type="password" id="password" name="password" placeholder="Enter password" value="" required="required" />
                        </div>

                        <span id="message-login-loading" class="alert hidden"></span>
                        <span id="message-login-error" class="alert alert-danger hidden"></span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success" id="login" ><span class="glyphicon glyphicon-user"></span> Sign in</button>
                        @Html.ActionLink("Register", "Register", "Account", null, new { @class = "btn btn-primary" })
                    </div>
                }
            </div>
        </div>
    </div>
</div>

AccountController:

    public ActionResult PartialMenu()
    {
        var model = ProfileSession.Session;
        return PartialView("_Menu", model);
    }

    public ActionResult SignIn(string email, string password)
    {
        Login login = loginRep.GetByEmailAndPassword(email, password);

        if (login != null)
        {
            ProfileSession.Session = profileRep.GetById(login.fk_profile);
            return RedirectToAction("PartialMenu", "Home");
        }

        ViewBag.Message("Email or password is incorrect");

        return RedirectToAction("PartialMenu");
    }

Answer 1

According to this answer the problem is that my Ajax call updates my div and therefore the modal ain't visible. The backdrop is however, and its unable to connect to the modal and is therefore unable to disappear like it normally would.

I ended up using the

$('.modal-backdrop').remove();

which on a succesfull ajax call, this removes all the backdrops on the page.

Please go and give Fre a vote up on his answer ^^