我是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">×</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的代码也有这些参考。请让我知道这背后的原因是什么。 此致
答案 0 :(得分: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">×</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>
&#13;
你有多个jquery和bootstrap.js文件包含在file.you只需要一个refrence.change它到this.and bootstrap.js应该在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>