Bootstrap modal background won't fade

Question

So, I have this sign on the page using Bootstrap modal. However, upon completion of the call modaldisappears as it should. In addition to the black background. How can I make sure the background also fades?

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 , the problem is that my call Ajaxupdates mine div, and so the modality is not displayed. However, the background and its inability to connect with the modal and therefore cannot disappear, as usual.

I ended up using

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

which on a succesfull ajax call removes all the backgrounds on the page.

, ^^

Answer 2

data-backdrop = "false" .