Question

我在这里有一段简单的代码，无法让它工作。我包括了所有资产，包括灯箱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执行相同操作，非常简单。这是我可以展示的一个小例子。

＆＃13;

<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-->

＆＃13;

Bootstrap Lightbox没有动作

1 个答案: