Bootstrap photo gallery light box modal is dark

Question

I'm making a Bootstrap photo gallery and everything is good except when I click a thumbnail. The light box would come out but it's dark like the thumbnails and I can't click the "next" and "previous" button because every time I click anywhere in the light box it will just disappear and returns to the photo gallery.

I have search the net including this but the solutions that I found didn't help. Here's my html:

<html lang="en-US">
<head><title>D' Clean Look</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<!--Load Bootstrap css-->
 <linkrel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!--load font awesome-->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel='stylesheet' href='https://cdn.rawgit.com/daneden/animate.css/v3.1.0/animate.min.css'>
<link rel="stylesheet" href="c:\website\css\stylesgallery.css" >
<link rel="stylesheet" href="c:\website\css\scrolling-nav.css">
<link rel="stylesheet" href="c:\website\css\styles.css" text="text/css">

<!-- Latest compiled JavaScript -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"> </script>
<script src="file:///c:/dclean/js/jquery-1.11.2.min.js"></script>
<script src="file:///c:/dclean/js/photo-gallery.js"></script>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>
<div class="container">    
    <div class="row intro-heading">
        <h1>
            Plate Holder
        </h1>
        <p>Click <strong><a style="color:red" href="c:\website\index.html#products">Here</a></strong> to go back to the main page.</p>
    </div>

    <ul class="row">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\honda-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\hyundai-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\mugen-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\nismo-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\nissan-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\spoon-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\spoon-h2.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\sport-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\sti-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\subaru-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\toms-h.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="c:\website\products\plateholder\trd-h.jpg">
        </li>

      </ul>             
</div> <!-- /container -->

<script src="file:///c:/dclean/js/bootstrap.min.js"></script>  
<script src="file:///c:/dclean/js/jquery.easing.min.js"></script>
<script src="file:///c:/dclean/js/scrolling-nav.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<script>new WOW().init();</script>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>

The stylegallery CSS:

.intro-heading {
text-align:center; 
border-bottom:1px dashed #ccc;  
padding:0 0 20px 0;
margin-bottom:40px;
margin-top: 60px; 
}

.intro-heading h3 {
font-family:arial; 
font-weight:bold; 
font-size:30px;
}

ul {         
      padding:0 0 0 0;
      margin:0 0 0 0;
  }
  ul li {     
      list-style:none;
      margin-bottom:25px;           
  }
  ul li img {
      cursor: pointer;
  }
  .modal-body {
      padding:5px !important;
  }
  .modal-content {
      border-radius:0;
  }
  .modal-dialog img {
      text-align:center;
      margin:0 auto;
  }
.controls{          
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;          
}
.next {
    float:right;
    text-align:right;
}
  /*override modal for demo only*/
  .modal-dialog {
      max-width:500px;
      padding-top: 90px;
  }
  @media screen and (min-width: 768px){
      .modal-dialog {
          width:500px;
          padding-top: 90px;
      }          
  }
  @media screen and (max-width:1500px){
      #ads {
          display:none;
      }
  }

The photo-gallery JS:

$(document).ready(function(){        
$('li img').on('click',function(){
    var src = $(this).attr('src');
    var img = '<img src="' + src + '" class="img-responsive"/>';

    //start of new code new code
    var index = $(this).parent('li').index();   

    var html = '';
    html += img;                
    html += '<div style="height:25px;clear:both;display:block;">';
    html += '<a class="controls next" href="'+ (index+2) + '">next &raquo;</a>';
    html += '<a class="controls previous" href="' + (index) + '">&laquo; prev</a>';
    html += '</div>';

    $('#myModal').modal();
    $('#myModal').on('shown.bs.modal', function(){
        $('#myModal .modal-body').html(html);
        //new code

        $('a.controls').trigger('click');
    })
    $('#myModal').on('hidden.bs.modal', function(){
        $('#myModal .modal-body').html('');
    });




}); 
})


$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('ul.row li:nth-child('+ index +') img').attr('src');             

$('.modal-body img').attr('src', src);

var newPrevIndex = parseInt(index) - 1; 
var newNextIndex = parseInt(newPrevIndex) + 2; 

if($(this).hasClass('previous')){               
    $(this).attr('href', newPrevIndex); 
    $('a.next').attr('href', newNextIndex);
}else{
    $(this).attr('href', newNextIndex); 
    $('a.previous').attr('href', newPrevIndex);
}

var total = $('ul.row li').length + 1; 
//hide next button
if(total === newNextIndex){
    $('a.next').hide();
}else{
    $('a.next').show()
}            
//hide previous button
if(newPrevIndex === 0){
    $('a.previous').hide();
}else{
    $('a.previous').show()
}


return false;
});

These are what I used based on a tutorial I found on the net. I can't seem to figure out why the light box is not working properly. Note: Some of the scripts are not for the page but I just left it there anyway and I don't know if that's a problem.