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無法在局部視圖中工作

回答

相關問題