ASP.NET Modal Popup only displays grayed out page

edit: link to error pic

I am new to ASP.NET, I cannot get Modal Popup to work, I think it has to do with including the right scripts in _Layout, but after extensive searching I cannot find a way to get more than a grayed out overlay over the view.

_Layout

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
      @Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
      @Scripts.Render("~/bundles/jqueryajax") ;
      @Scripts.Render("~/bundles/bootstrap")
</head>
<body>
<div class="container body-content">
 @RenderBody()
 @RenderSection("scripts", required: false)
</div>

Index

<div id="modal1" class='modal fade in'>
<div id="modal2">
</div>
</div>
 <input type="button" id="btn" value="Click to popup"/>
 <script type="text/javascript">
$(document).ready(function () {
    $("#btn").click(function () {
        $.ajax({
            cache: false,
            url: '@Url.Action("Modal")',
            success: function (data) {
                $("#modal2").html(data);
                $("#modal1").modal('show');
            }
        });
    });
});

Solution

(Via data attributes):

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.

You can try this

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">show my modal </button>

        <!-- Modal -->
         <div class="modal fade" id="myModal" 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="myModalLabel">Modal title</h4>
        </div>
      <div class="modal-body">This is my content</div>
      <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <button type="button" class="btn btn-primary">Save changes</button>
       </div>
      </div>
   </div>
   </div>
  <!-- /.modal -->

Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

   $('#myModal').modal(options)