Question

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/

Answer 1

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

弹出窗口不起作用的图像滑块？

1 个答案: