Question

我正在尝试使用bootstrap添加灯箱，但是当我点击指向灯箱的链接时，没有任何事情发生。

我的HTML代码如下：

 <head>
  <link href="css/bootstrap-lightbox.css" rel="stylesheet" type="text/css"/>
  <link href ="css/bootstrap.css" rel="stylesheet" type="text/css" />
  <link href ="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <title>Bootstrap RC1</title>

<div class="container">

    <div class="row">

        <div class="col-lg-12">`

            <h2>Bootstrap Lightbox - Creativity Tuts</h2>

            <div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="lightbox-content">
                        <img src="images/beautiful-image.jpg">
                        <div class="lightbox-caption"><p>This is my background image</p></div>
                    </div>
            </div>
                <a data-toggle="lightbox" href='#demolightbox'><p>Open lightbox</p></a>
        </div>
    </div>  
</div>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap-lightbox.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

我认为您在代码中使用了两个jquery文件，

<script src="js/jquery-2.0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

我认为您应该一次使用一个，并将此脚本置于所有嵌入脚本的其余部分之上

此代码中还添加了两个引导程序文件，只需要一个。因此，从代码中删除以下文件之一

<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>

Answer 2

我认为您需要做的就是将ajax.googleapis.com ...放在所有其他脚本之上，它会起作用！

Answer 3

试试这个

<html>
<head>   
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.css"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.css"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-lightbox/0.7.0/bootstrap-lightbox.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>   

<div class="container">

    <div class="row">

        <div class="span12">`

            <h2>Bootstrap Lightbox - Creativity Tuts</h2>

            <div id="demolightbox" class="lightbox fade hide" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="lightbox-content">
                        <img src="img_fjords.jpg"/>
                        <div class="lightbox-caption">
                          <p>This is my background image</p>
                        </div>
                    </div>
            </div>
                <a data-toggle="lightbox" href="#demolightbox" class="span2 thumbnail">
                  <p>Open lightbox</p>
                  <img src="img_fjords.jpg"/>
                </a>

        </div>
    </div>  
</div>

</body>

</html>

使用Bootstrap添加灯箱

3 个答案: