图像滑块弹出不工作？

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>

我创建使用引导图像的微型滑块。

我试图表明每个图像的弹出，同时点击它...

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

来源

2014-08-28 User2413

哪里是你的js脚本？我只是在你的小提琴中看到HTML ... – pbenard 2014-08-28 09:05:02

@TheLittlePig我已经使用bootstrap ..你可以看到引导头内的JavaScript（bootstrap_carousel.js）链接.. – User2413 2014-08-28 09:06:49

我谈论你试图打开图片的脚本莫塔尔，不是旋转木马... – pbenard 2014-08-28 09:08:29

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>

来源

2014-08-28 09:13:09 pbenard

非常感谢..这就是我想要的.. – User2413 2014-08-28 09:16:39

图像滑块弹出不工作？

回答

相关问题