Bootstrap 模态背景不会消失答案

【问题标题】：Bootstrap modal background won't disappearBootstrap 模态背景不会消失
【发布时间】：2015-03-14 09:51:02
【问题描述】：

所以我有这个使用Bootstraps 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>

帐户控制器：

    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");
    }

【问题讨论】：

请创建一个 jsfiddle。还有，“背景”？你的意思是覆盖/背景？您的服务器代码无关紧要。
@im1dermike：我不认为服务器代码无关紧要。由于问题发生在我调用服务器之后。代码显示了应该如何更新表单。我不明白为什么白色模态后面的褪色黑色背景不会与模态一起消失。而且我无法重做 jsFiddle 中的问题。对不起
当我将您的模态代码按原样弹出到 Bootply 并在页面加载时弹出它，然后将其关闭，它会正常消失：bootply.com/DkrP5BPYsA。除非有办法复制错误，否则我不确定任何人都能为您提供多少帮助。
@MattD：您正在用右上角的“关闭”x 关闭模态框吗？这也适用于我。问题发生在 ajax 调用之后。我认为问题是由于 aja 所做的更新而发生的。我想知道的是，如果 ajax 调用成功，是否有办法强制背景消失
您应该能够发回成功消息以通过 JavaScript 处理。如果成功，请在您的模态框上运行.modal('hide')，这应该会完全隐藏它。问题是，如果没有可行的方法来测试或重现问题，那么这里的任何人都不太可能为您提供帮助。

标签： css ajax twitter-bootstrap

【解决方案1】：

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

我最终使用了

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

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

请就他的回答给 Fre 投票吧^^

【讨论】：

警告：我发现由于模态背景在显示时会移除滚动条，因此此解决方案不会将滚动条返回到窗口。换句话说，在页面刷新之前你不会有滚动条。
虽然上述答案有效，但此处stackoverflow.com/a/30373324/2630841 和此处stackoverflow.com/a/20109519/2630841 提供的答案更好。
这隐藏了模态，但是用户需要在这段代码之后点击两次才能打开模态......如何解决这个问题

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是我的作品。

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

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

$("模态背景").remove();

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

【讨论】：