Question

所以我使用Bootstrap s modal在登录页面。但是，在通话结束后，modal会消失。除了黑色背景。如何确保背景也消失？

我的_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

根据this回答问题是我的Ajax来电更新了div，因此模态不可见。然而，背景是，它无法连接到模态，因此无法像通常那样消失。

我最终使用了

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

在成功的ajax调用中，这将删除页面上的所有背景。

请去给他一个关于他的回答的投票^^

Answer 2

您还可以在按钮上使用data-backdrop =“false”属性。

Answer 3

这是我的作品。

$('.close').click();

$(document.body).removeClass("modal-open");

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

https://github.com/valor-software/ngx-bootstrap/issues/853

Bootstrap模态背景不会消失

3 个答案: