Bootstrap Lightbox no action

Question

У меня есть простой фрагмент кода здесь и не могу заставить его работать. Я включил все активы, включая lightbox css и js. Вот мой код:

<a data-toggle="lightbox" data-target="#image" class="thumbnail"> 
    <img src="../app/uploads/test.jpg" class="img-responsive"> 
</a> 

<div id="image" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class='lightbox-content'> 
    <img src="../app/uploads/test.jpg"> 
    <div class="lightbox-caption"><p>Caption here</p></div> 
    </div> 
</div> 

Когда я нажимаю изображение, ничего не происходит, но не меняют, как someUrl к someUrl#image, так что я думаю, что он читает код, но не всплывал образ. Я что-то упускаю?

Answer 1

Вы можете сделать то же самое с Boostrap Modal, его довольно легко. Вот небольшой пример, который я могу показать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<a data-toggle="modal" href="#HoastedModal" class="btn btn-info">Hoasted Modal</a> 
 
<br> 
 
    <br> 
 
<p>This JSFiddle is part of a <a href="https://www.hoasted.com/bootstrap-3-modal-example-with-jsfiddle">Hoasted webhosting blogpost</a></p> 
 

 
<div id="HoastedModal" class="modal fade"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h4 id="modal-label">Header</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Content.</p> 
 
      </div> 
 
     </div> <!--modal-content--> 
 
    </div> <!--modal-dialog--> 
 
</div> <!--modal-->