MVC 模态弹出窗口在部分视图中不起作用答案

【问题标题】：MVC Modal Popup not working in partial viewMVC 模态弹出窗口在部分视图中不起作用
【发布时间】：2017-07-07 09:32:59
【问题描述】：

我正在使用 MVC 5 脚手架代码生成 _LoginPartial.cshtml，该代码带有重定向到默认登录页面的登录按钮。但是，我正在尝试更改此设置，以便当我单击按钮时，会弹出登录 modal 而不是重定向到另一个页面。我修改了代码，但它似乎不工作如下：

当模态弹出时，整个屏幕都是灰色的，根本无法点击任何东西。

以下是代码：

_LoginPartial.cshtml

@using Microsoft.AspNet.Identity
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

@if (Request.IsAuthenticated)
{
   using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
   {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        @if (ViewContext.HttpContext.User.IsInRole("Admin"))
        {
            <li>
                @Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })
            </li>
        }
        <li>
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        </li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
    <li>
        <a href="#" data-toggle="modal" data-target="#loginModal">
            Log In
        </a>
    </li>
</ul>
}

<!-- Modal -->
div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="loginModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">
            <section id="loginForm">
                <div id="status" class="text-danger">
                    <p></p>
                </div>
                @using (Ajax.BeginForm("Login", "Account", new AjaxOptions { UpdateTargetId = "status" }))
                {
                    @Html.AntiForgeryToken()
                    <h4>Use a local account to log in.</h4>
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                    <div class="form-group">
                        @Html.Label("E-mail", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.TextBox("email", "", new { @class = "form-control", @placeholder = "Email" })
                        </div>
                    </div>
                    <div class="form-group">
                        @Html.Label("Password", new { @class = "col-md-2 control-label" })
                        <div class="col-md-10">
                            @Html.Password("Password", "", new { @class = "form-control", @placeholder = "Password" })
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <input type="submit" value="Log in" class="btn btn-default" />
                        </div>
                    </div>
                }
            </section>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

出于某种原因，我认为这可能是因为我将 modal 代码放在了 partial view 中，这使得模式弹出窗口处于禁用状态..知道弹出窗口为什么会这样吗？

【问题讨论】：

默认的表单提交按钮操作是重定向您的页面。您必须拦截此事件以防止默认浏览器行为。
@Jasen 你是什么意思？我用谷歌搜索了一些建议是因为引导模式标记：stackoverflow.com/questions/23685837/… 但是，我找不到解决方案，因为它是_LoginPartialView 的一部分
您是否尝试在 Modal 中添加 z-index: 9999？
与z-index有关

标签： javascript asp.net asp.net-mvc bootstrap-modal partial-views

【解决方案1】：

尝试使用以下

 $(document).ready(function(){
        $("#loginModal").("shown.bs.modal",function(){
          $(".modal-backdrop").remove();
        }).on("hide.bs.modal",function(){
          $(".modal-backdrop").remove();
        });
      })

【讨论】：

【解决方案2】：

遇到了和你一样的问题。我的解决方案是在 jQuery Ajax 调用成功后使用以下代码：$(".modal-backdrop").remove();。这将删除您的叠加层，因为引导程序会即时添加此叠加层，因此最简单的解决方法是删除它。

【讨论】：