How to Open Modal in ASP.NET MVC5 - asp.net-mvc

Question

I am new in MVC5, I have taken this snippet of code from w3schools and made changes according to my need but it is not showing modal on button click. Please guide where I am missing...
References in my Master View
Head
<!--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-->
Body
<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>
I have given all the references but why it was not showing modal. When I use "Pavan Teja"'s :-) given code, it worked for me. Pavan Teja's code also have those references. please let me know what is the reason behind this.
Regards

Answer 1

you have to include jquery and bootstrap.js to make it work.markup you provided is correct.
<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>
you have multiple jquery and bootstrap.js files included in file.you just need one refrence.change it to this.and bootstrap.js shoulb be after 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>