带有弹出窗口的图像滑块不起作用？答案

【问题标题】：Image slider with popup not working?带有弹出窗口的图像滑块不起作用？
【发布时间】：2014-08-28 08:46:48
【问题描述】：

HTML代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Mini Slider</title>

  <script type="text/javascript" src="./min_slider_files/jquery-1.9.1.js"></script>


  <link rel="stylesheet" type="text/css" href="./min_slider_files/bootstrap.css">


  <script type="text/javascript" src="./min_slider_files/bootstrap-carousel.js"></script>


</head>
<body>
  <div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
  <div class="carousel-inner">
    <div class="item">
      <img src="./min_slider_files/bootstrap-mdo-sfmoma-01.jpg" alt="">
      <div class="carousel-caption">
         <h4>First Thumbnail label</h4>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
          vehicula ut id elit.</p>
      </div>
    </div>
    <div class="item">
      <img src="./min_slider_files/bootstrap-mdo-sfmoma-02.jpg" alt="">
      <div class="carousel-caption">
         <h4>Second Thumbnail label</h4>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
          vehicula ut id elit.</p>
      </div>
    </div>
    <div class="item active">
      <img src="./min_slider_files/bootstrap-mdo-sfmoma-03.jpg" alt="">
      <div class="carousel-caption">
         <h4>Third Thumbnail label</h4>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies
          vehicula ut id elit.</p>
      </div>
    </div>
  </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

我使用 bootstrap 创建了一个带有图像的迷你滑块。

我尝试在点击时显示每张图片的弹出窗口...

小提琴：http://jsfiddle.net/salmanamaan24/Et4pc/281/

【问题讨论】：

你的js脚本在哪里？我只是在你的小提琴中看到了 HTML...
@TheLittlePig 我已经使用 bootstrap 完成了。你可以在 head 中看到 bootstrap javascript(bootstrap_carousel.js) 链接。
我说的是你试图以模态打开图片的脚本，而不是轮播...
@TheLittlePig 我只是通过一些不在引导程序中的脚本代码尝试了它，但它不起作用，所以我删除了它。任何帮助将不胜感激。

标签： javascript jquery css twitter-bootstrap slider

【解决方案1】：

引导层：http://www.bootply.com/byUX0u7K0s

CSS：

.modal-body img{
    width:100%;
    height:100%;
  }

JS：

$('img').click(function(){
  $('.modal-body').html(  $(this).parent().html() );
    $('#myModal').modal({show:true})
});

HTML：

<div id="myCarousel" class="carousel slide" style="width: 400px; margin: 0 auto">
  <div class="carousel-inner">
    <div class="item">
      <img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">

    </div>
    <div class="item">
      <img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">

    </div>
    <div class="item active">
      <img src="http://jasny.github.com/bootstrap/2.3.1/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">

    </div>
  </div> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>

  <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>



<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal header</h3>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

【讨论】：