Bootstrap модальный выпуск. Modal не работает

Question

Я пытаюсь сделать свою модальную работу, но кажется, что что-то не так. Я попытался скопировать код из официальной документации bootstrap3, и он все еще не работает. Я добавлю следующий код:

Body: 

    <div class="container"> 

     <ul class="nav nav-pills nav-stacked"> 
     <li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li> 
     <li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li> 
     <li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li> 
     <li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li> 
     </ul> 

     <div class="modal fade and carousel slide" id="lightbox"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
      <div class="modal-body"> 
       <ol class="carousel-indicators"> 
       <li data-target="#lightbox" data-slide-to="0" class="active"></li> 
       <li data-target="#lightbox" data-slide-to="1"></li> 
       <li data-target="#lightbox" data-slide-to="2"></li> 
       </ol> 
       <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="http://placehold.it/900x500/777/" alt="First slide"> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/900x500/666/" alt="Second slide"> 
       </div> 
       <div class="item"> 
        <img src="http://placehold.it/900x500/555/" alt="Third slide"> 
        <div class="carousel-caption"><p>even with captions...</p></div> 
       </div> 
       </div><!-- /.carousel-inner --> 
       <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"> 
       <span class="glyphicon glyphicon-chevron-left"></span> 
       </a> 
       <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
       </a> 
      </div><!-- /.modal-body --> 
      </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 

    </div><!-- /.container --> 

Answer 1

Все, кажется, работает нормально. Вот jsFiddle, поэтому я думаю, что TAHT путь к JQuery или бутстрэпами JS файл может быть неправильно

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
     <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 

 
    <ul class="nav nav-pills nav-stacked"> 
 
    <li><a href="#lightbox" data-toggle="modal">Open Lightbox</a></li> 
 
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="1">2nd Image</a></li> 
 
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="2">3rd Image</a></li> 
 
    <li><a href="#lightbox" data-toggle="modal" data-slide-to="15">Open non existing Image</a></li> 
 
    </ul> 
 

 
    <div class="modal fade and carousel slide" id="lightbox"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
     <div class="modal-body"> 
 
      <ol class="carousel-indicators"> 
 
      <li data-target="#lightbox" data-slide-to="0" class="active"></li> 
 
      <li data-target="#lightbox" data-slide-to="1"></li> 
 
      <li data-target="#lightbox" data-slide-to="2"></li> 
 
      </ol> 
 
      <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <img src="http://placehold.it/900x500/777/" alt="First slide"> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://placehold.it/900x500/666/" alt="Second slide"> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="http://placehold.it/900x500/555/" alt="Third slide"> 
 
       <div class="carousel-caption"> 
 
       <p>even with captions...</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!-- /.carousel-inner --> 
 
      <a class="left carousel-control" href="#lightbox" role="button" data-slide="prev"> 
 
      <span class="glyphicon glyphicon-chevron-left"></span> 
 
      </a> 
 
      <a class="right carousel-control" href="#lightbox" role="button" data-slide="next"> 
 
      <span class="glyphicon glyphicon-chevron-right"></span> 
 
      </a> 
 
     </div> 
 
     <!-- /.modal-body --> 
 
     </div> 
 
     <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
    </div> 
 
    <!-- /.modal --> 
 

 
</div> 
 
<!-- /.container -->