Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/381.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带弹出窗口的图像滑块不工作？_Javascript_Jquery_Css_Twitter Bootstrap_Slider - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 带弹出窗口的图像滑块不工作？

Javascript 带弹出窗口的图像滑块不工作？

javascript jquery css twitter-bootstrap

Javascript 带弹出窗口的图像滑块不工作？,javascript,jquery,css,twitter-bootstrap,slider,Javascript,Jquery,Css,Twitter Bootstrap,Slider,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

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>

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

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

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


微型滑块
第一个缩略图标签
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。多尼克身份证
eget metus的精英非mi porta孕妇。Nullam id dolor id nibh ultricies
车辆识别码精英

第二个缩略图标签
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。多尼克身份证
eget metus的精英非mi porta孕妇。Nullam id dolor id nibh ultricies
车辆识别码精英

第三个缩略图标签
我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。多尼克身份证
eget metus的精英非mi porta孕妇。Nullam id dolor id nibh ultricies
车辆识别码精英
我已经使用引导创建了一个带有图像的迷你滑块

我试图显示每个图像的弹出窗口，同时点击它

小提琴：

Bootply：

CSS：

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

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

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

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

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

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

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

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

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

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

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


×
模态头
关
你的js脚本在哪里？我只是在你的提琴中看到HTML…@TheLittlePig我已经用bootstrap完成了..你可以在head中看到bootstrap javascript（bootstrap_carousel.js）链接..我谈论你试图在modal中打开图片的脚本，不是旋转木马…@TheLittlePig我只是通过一些脚本代码尝试了它，但它不在引导中，所以我删除了它。任何帮助都将不胜感激。