Bootstrap 3 灯箱使用模态

Question

我在我的网站上使用 bootstrap 实现了一个画廊，但是当我点击图片时，灯箱没有为我弹出。我看不到任何错误，也许你可以。我可以让画廊中的图像显示出来，但是当我点击它时，没有任何反应。单击图像时，应会出现一个带有图片和控件的灯箱。

        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width; initial-scale=1.0">

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">

        <!-- CSS: implied media=all -->
  <!-- CSS concatenated and minified via ant build script-->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/bootstrap-theme.min.css">
      <link rel="stylesheet" href="css/style.css">

  <style type="text/css">

    .modal-dialog {}

    .thumbnail {margin-bottom:6px;}

    .carousel-control.left,.carousel-control.right{
      background-image:none;
      margin-top:10%;
      width:5%;
    }

  </style>

  <script type="text/javascript">

    $(document).ready(function(){
      /* copy loaded thumbnails into carousel */
    $('.row .thumbnail').on('load', function() {

    }).each(function(i) {
      if(this.complete) {
        var item = $('<div class="item"></div>');
        var itemDiv = $(this).parents('div');
        var title = $(this).parent('a').attr("title");

        item.attr("title",title);
        $(itemDiv.html()).appendTo(item);
        item.appendTo('.carousel-inner'); 
        if (i==0){ // set first item active
         item.addClass('active');
        }
      }
    });

    /* activate the carousel */
        $('#modalCarousel').carousel({interval:false});

    /* change modal title when slide changes */
        $('#modalCarousel').on('slid.bs.carousel', function () {
          $('.modal-title').html($(this).find('.active').attr("title"));
        });

    /* when clicking a thumbnail */
        $('.row .thumbnail').click(function(){
            var idx = $(this).parents('div').index();
            var id = parseInt(idx);
            $('#myModal').modal('show'); // show the modal
            $('#modalCarousel').carousel(id); // slide carousel to selected

        });
    });

  </script>
    </head>

    <body>          
        <div id="main" role="main">
            <br />
            <div class="page_title">
            <div class="container">
                <h1 align="center">ZZ ZZ</h1>
            </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="img/123.jpg"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="img/carousel1.jpg"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/777"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/EEE"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/DDD"></a></div>
              <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div>
           </div>
        </div>
<div class="modal" id="myModal" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <button class="close" type="button" data-dismiss="modal">×</button>
        <h3 class="modal-title"></h3>
    </div>
    <div class="modal-body">
        <div class="carousel" id="modalCarousel">

          <div class="carousel-inner">



          </div>

          <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="carousel-control right" href="#modalCarousel" data-

    slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

            </div>
        </div>
        <div class="modal-footer">


        <button class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
       </div>
      </div>
    </div>
    <br />
    <br />

        <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
      <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script>window.jQuery || document.write('<script src="js/libs/jquery-2.1.1.min"><\/script>')</script>
      <script src="js/libs/modernizr-2.0.6.min.js"></script>
      <script src="js/libs/bootstrap.min.js"></script>
      <script defer src="js/plugins.js"></script>
      <script>
         (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
         (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
         m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

         ga('create', '', 'auto');
         ga('send', 'pageview');

      </script>
    </body>
</html>

Answer 1

我好像修好了。您的代码存在一些（相对较小的）问题，最显着的是模态和 JavaScript 和 CSS 文件的冗余集的一些拼写错误。您应该只导入一次 Bootstrap 文件，无论您从哪个来源导入它们。我认为这些问题加在一起，正在把事情搞砸。请注意，我在下面的代码和 public Gist I published for you, which might be easier to read:

中注释掉了多余的行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<!-- <link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> -->

<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style.css"> -->

<style type="text/css">

.modal-dialog {}

.thumbnail {margin-bottom:6px;}

.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}

</style>

<script type="text/javascript">

$(document).ready(function(){
/* copy loaded thumbnails into carousel */
$('.row .thumbnail').each(function(i) {
  var item = $('<div class="item"></div>');
  var itemDiv = $(this).parents('div');
  var title = $(this).parent('a').attr('title');

  item.attr('title', title);
  item.append(itemDiv.html());
  $('.carousel-inner').append(item);
  if (i==0){ // set first item active
    item.addClass('active');
  }
});

/* activate the carousel */
// $('#modalCarousel').carousel({interval:false});

/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
  $('.modal-title').html($(this).find('.active').attr("title"));
});

/* when clicking a thumbnail */
$('.row .thumbnail').click(function(){
    var idx = $(this).parents('div').index();
    var id = parseInt(idx);
    $('#myModal').modal('show'); // show the modal
    $('#modalCarousel').carousel(id); // slide carousel to selected

});
});

</script>
</head>

<body>
<div id="main" role="main">
    <br />
    <div class="page_title">
    <div class="container">
        <h1 align="center">ZZ ZZ</h1>
    </div>
    </div>
</div>

<div class="container">
    <div class="row">
      <!-- <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="img/123.jpg"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="img/carousel1.jpg"></a></div> -->
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/449955/FFF"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/992233"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/2255EE"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/449955/FFF"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/777"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/992233"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/EEE"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/449955/FFF"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/DDD"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="http://placehold.it/600x350/992233"></a></div>
   </div>
</div>
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title"></h3>
</div>
<div class="modal-body">
<div class="carousel" id="modalCarousel">

  <div class="carousel-inner">



  </div>

  <a class="carousel-control left" href="#modalCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
  <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>

    </div>
</div>
<div class="modal-footer">


<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<br />
<br />

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-2.1.1.min"><\/script>')</script>
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script defer src="js/plugins.js"></script>
<script>
 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','http://www.google-analytics.com/analytics.js','ga');

 ga('create', '', 'auto');
 ga('send', 'pageview');

</script> -->
</body>
</html>

Bootstrap 3 灯箱使用模态

Boootstrap 3 lightbox using modal

html

css

jquery

bootstrap-modal

twitter-bootstrap-3