如何在ASP.NET MVC5中打開模態

Question

我是MVC5中的新成員，我從w3schools獲取了這段代碼，並根據需要進行了更改，但未顯示按鈕單擊的模式。請指導我失蹤這裏...

參考我的母版視圖

頭

<!--Start Bootstrap--> 
<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/CustomBootStrap.css" rel="stylesheet" /> 
<link href="~/Content/Site.css" rel="stylesheet" /> 
<!--End Bootstrap--> 
<!--Start Scripts--> 
<script src="~/Scripts/bootstrap.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script src="~/Scripts/CustomJavaScript.js"></script> 
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script> 
<script src="~/Scripts/jquery-1.10.2.js"></script> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery-2.2.1.js"></script> 
<script src="~/Scripts/jquery-2.2.1.min.js"></script> 
<script src="~/Scripts/_references.js"></script> 
<script src="~/Scripts/jquery.validate-vsdoc.js"></script> 
<script src="~/Scripts/jquery.validate.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
<script src="~/Scripts/modernizr-2.6.2.js"></script> 
<script src="~/Scripts/respond.min.js"></script> 
<script src="~/Scripts/respond.js"></script> 
<!--End Scripts--> 

身體

<div class="panel"> 
<div class="panel-heading div-bgGreen div-textWhite text-center"><span style="font-weight:600;" class="text-center">Recent Activities</span></div> 
<div class="panel-body"> 
    Panel Content 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button> 

    <!-- Modal --> 
    <div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> 
     <div class="modal-dialog modal-sm"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title">Modal Header</h4> 
       </div> 
       <div class="modal-body"> 
        <p>This is a small modal.</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我已經給所有引用但爲什麼它沒有顯示模態。當我使用「Pavan Teja」的:-)代碼時，它對我有用。 Pavan Teja的代碼也有這些參考。請讓我知道這背後的原因是什麼。 Regards

Answer 1

你必須包括jquery和bootstrap.js使它工作。你提供的標記是正確的。

<script src="https://code.jquery.com/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button> 
 

 
<!-- Modal --> 
 
<div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>This is a small modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

你有多個包括jQuery和bootstrap.js文件file.you只需要一個refrence.change它this.and bootstrap.js shoulb是jQuery的後。

<script src="~/Scripts/jquery-2.2.1.min.js"></script> 
<script src="~/Scripts/bootstrap.min.js"></script> 
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script> 
<script src="~/Scripts/CustomJavaScript.js"></script> 
<script src="~/Scripts/_references.js"></script> 
<script src="~/Scripts/jquery.validate-vsdoc.js"></script> 
<script src="~/Scripts/jquery.validate.min.js"></script> 
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
<script src="~/Scripts/modernizr-2.6.2.js"></script> 
<script src="~/Scripts/respond.min.js"></script>