無法使Bootstrap Modal以一些JavaScript爲中心

我正在使用Bootstrap模式處理兩個不同的事情。首先是從MVC局部視圖中通過dyanamically加載它們。這部分似乎正在工作。現在我試圖讓Modal在頁面上居中。無法使Bootstrap Modal以一些JavaScript爲中心

我正在處理這個例子，但似乎無法得到它的工作。 https://www.abeautifulsite.net/vertically-centering-bootstrap-modals

我將JavaScript中對話框ID的名稱更改爲「.modal-container」，以便它能找到我的模式。除此之外，我沒有看到任何其他我需要改變的地方。我看過F12開發工具，我沒有看到任何錯誤。

Index.cshtml

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index</title> 
    <link href="~/Content/Site.css" rel="stylesheet" /> 
</head> 
<body> 
    <div> 
     <div class="container"> 
      @Html.ActionLink("Test Modal ", "TestModal", "Test", null, new { @class = "modal-link btn btn-warning" }) 
     </div> 
    </div> 

    <div id="modal-container" class="modal fade" role="dialog"> 
     <div class="modal-content"> 
     </div> 
    </div> 

    <script src="~/Scripts/jquery-1.10.2.min.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 

    <script type="text/javascript"> 

     //**** Bootstrap Modal - used with Partial Views *********************** 
     $(function() { 
      // Attach modal-container bootstrap attributes to links with .modal-link class. 
      // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. 
      $('body').on('click', '.modal-link', function (e) { 
       e.preventDefault(); 
       $(this).attr('data-target', '#modal-container'); 
       $(this).attr('data-toggle', 'modal'); 
      }); 

      // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
      $('body').on('click', '.modal-close-btn', function() { 
       $('#modal-container').modal('hide'); 
      }); 

      //clear modal cache, so that new content can be loaded 
      $('#modal-container').on('hidden.bs.modal', function() { 
       $(this).removeData('bs.modal'); 
      }); 

      $('#CancelModal').on('click', function() { 
       return false; 
      }); 
     }); 

     /** 
     * Vertically center Bootstrap 3 modals so they aren't always stuck at the top 
     */ 
     $(function() { 

      function reposition() { 

       var modal = $(this), 
        dialog = modal.find('.modal-container'); 

       modal.css('display', 'block'); 

       // Dividing by two centers the modal exactly, but dividing by three 
       // or four works better for larger screens. 
       dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height())/2)); 

      } 

      // Reposition when a modal is shown 
      $('.modal').on('show.bs.modal', reposition); 

      // Reposition when the window is resized 
      $(window).on('resize', function() { 
       $('.modal:visible').each(reposition); 
      }); 

     }); 
    </script> 

</body> 
</html>

控制器

public class TestController : Controller 
    { 
     // GET: Test 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult TestModal() 
     { 
      return PartialView("_TestModal"); 
     } 
    }

_TestModal.cshtml

<div class="modal-body"> 
    <h4> 
     Are you sure you want to delete this cost center from all clocks in the group? 
    </h4> 

    @using (Html.BeginForm("Lyubomir", "Home", FormMethod.Post)) 
    { 
     <div class="row"> 
      &nbsp; 
     </div> 
     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <button type="submit" id="approve-btn" class="btn btn-danger">Save</button> 
      </div> 
     </div> 
    } 
</div> 


<script type="text/javascript"> 
    $(function() { 
     $('#approve-btn').click(function() { 
      $('#modal-container').modal('hide'); 
     }); 
    }); 
</script>

編輯：我應該在戰後初期已經提到，莫代爾只是顯示在頂部的頁面，並達到100％的寬度。

來源

2016-08-29 Caverman

中心....垂直？還是水平？（它應該自動水平居中....）如果垂直，你的意思是在瀏覽器視口？ –

對不起，應該澄清一點。我更新了我的帖子。 – Caverman

好吧，我發現（我認爲是）在你的代碼相當簡單的錯誤只是看着它：

dialog = modal.find('.modal-container');

發現任何元素與「modal-類容器'。

但是，在您的代碼片段中，您將div的ID設置爲'modal-container'，而不是CLASS。

因此，上面的代碼行不是找到你想要的div。事實上，我認爲它沒有找到任何元素（因爲沒有一類'模態容器'）。

因此，也許它更改爲類似：

<div class="modal fade modal-container" role="dialog"> 
    <div class="modal-content"> 
    </div> 
</div>

或離開HTML一樣，改變modal.find（）的說法是這樣的：

dialog = modal.find('#modal-container');

讓我知道如果有幫助。

編輯：

你的模式是全寬，因爲你的引導模式的結構是關閉的。你錯過了一個div。

這是你擁有的一切：

<div id="modal-container" class="modal fade" role="dialog"> 
    <div class="modal-content"> 
    </div> 
</div>

這裏是你所需要的（而且應該解決您的問題）：

<div id="modal-container" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
    </div> 
    </div>

添加一個div類「模式的-dialog'應該有所幫助。

哦，改變modal.find（）到：

dialog = modal.find('.modal-dialog');

來源

2016-08-29 17:17:47

我確信這會成爲問題，這絕對是問題的一部分。我改成了modal.find（'＃modal-container'），並將DIV上的ID保持一致。不幸的是我沒有看到任何改變。開發工具中仍然沒有錯誤。我已關閉/重新打開瀏覽器並清除Temp Internet Files以保證安全。 – Caverman

我想知道是否有東西覆蓋了莫代爾。根據我的理解，Modal的寬度不應該是100％。我相信默認行爲是將Modal放在瀏覽器的頂部，但不是100％的寬度。 – Caverman

我剛剛意識到你爲什麼會遇到這些問題。您還缺少存在引導模式的整個div元素。檢查我的最新編輯帖子（底部），並回到我身邊。 –

無法使Bootstrap Modal以一些JavaScript爲中心

回答

相關問題