MVC Modal Popup无法在局部视图中工作

我正在使用MVC 5脚手架代码，该代码生成_LoginPartial.cshtml随登录按钮重定向到默认登录页面。但是，我试图改变这一点，以便当我点击该按钮时，登录modal弹出，而不是重定向到另一个页面。我修改了代码，但它似乎不工作如下：MVC Modal Popup无法在局部视图中工作

当模式弹出，但整个屏幕呈灰色，无法点击任何东西。

以下是代码：

_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模式弹出窗口处于禁用状态..任何想法为什么弹出窗口是这样的？

来源

2017-02-17 Pow4Pow5

默认表单提交按钮动作时，重定向页面。您必须拦截此事件以防止默认的浏览器行为。 – Jasen

@Jasen你是什么意思？我GOOGLE了一些建议是因为bootstrap模式标记：http：//stackoverflow.com/questions/23685837/open-an-modal-window-from-navigation-bar 但是，我找不到解决方案，因为它是_LoginPartialView的一部分 – Pow4Pow5

您是否曾尝试向Modal添加z-index：9999？ –

尝试使用以下

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

来源

2017-02-18 06:49:41

MVC Modal Popup无法在局部视图中工作

回答

相关问题