Question

我在this page上有一个jQuery垂直时间轴，并且我试图在时间轴上打开每个特定图像，当每个图像被点击时，它都是自己的模态。模态弹出窗口与prev next按钮的工作方式相同，但无论您单击哪个图像，它都会打开第一个图像。我需要在每个模态，日期，名称等上添加不同的信息，因此我希望每个图像的相关信息与弹出的每个模态相匹配。

我已经阅读了这篇文章#210936，但没有运气。我知道我的代码很相似，而且我很接近，但我无法看到我所遗漏的内容。任何帮助深表感谢。谢谢！

HTML模态触发器：

<!-- 1900's Time Period Start -->
   <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-movie">
        <span class="title"><strong>1900's</strong></span>
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content left">
        <h2>First Surfing Recorded</h2>
        <div class="flex-item1">
          <!-- Image to Trigger Modal -->
          <a href="#myModal" class="modalImg image-border image-border" data-toggle="modal">
            <img src="images/boards_v2.png"></a>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#myModal" class="cd-read-more" data-toggle="modal">Read more</a>
        <span class="cd-date right" id="1900's">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

模仿HTML：

<!-- Modal Code Start -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>

  <div class="modal-body">
    <!-- Indicators -->
    <div class="carousel slide" data-interval="false" id="MyCarousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner timeline">

        <!-- 1st Modal in Timeline -->
        <div class="item active" id="modal1">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <h1>First Surfing Recorded</h1>
            <div class="col-1">
              <img src="images/boards.png" id="img1" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 2nd Modal in Timeline -->
        <div class="item" id="modal2">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Service Infrastructure</h1>
              <img src="images/taihitian_surfers_joseph_banks_lg.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 3rd Modal in Timeline -->
        <div class="item">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Tom Blake and Sam Reid surf Malibu for the first time</h1>
              <img src="images/rawImage_pcr_fred_windisch.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a href="#MyCarousel" class="left carousel-control timeline" data-slide="prev"><span class="glyphicon left"></span></a>
      <a href="#MyCarousel" class="right carousel-control timeline" data-slide="next"><span class="glyphicon right"></a>

      </div>

    </div>
  </div>
</div>

模态的Javascript：

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $('#myModal').modal('show');
    $('#MyCarousel').carousel($(this).index()); 
  });   
});

Answer 1

您只有一个名为<a href="#waimea" class="cd-read-more" data-toggle="modal">Waimea Surfed for First Time</a> <div class="modal fade" id="waimea"></div>的模态。你的所有链接都指向那个模态。所以，实际上，没有理由不会打开每个模式的模态。

您需要创建模式HTML的多个实例，为每个实例分配一个唯一ID，然后将HREF指向这些实例。会是很多的一个例子：

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $($(this).attr('href')).modal('show');
  });   
});

我猜你的jQuery会是这样的：

http://localhost:8000/foobar

不确定旋转木马，因为现在的代码还不够用，但概念应该类似！

Answer 2

我整理了这个。我为每个模态触发器删除了href并按顺序添加了data-slide="0"，然后将javascript调用修改为下面的更新代码。请参阅上面链接中的工作示例。

HTML模态触发器：

<!-- 1900's Time Period Start -->
   <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-movie">
        <span class="title"><strong>1900's</strong></span>
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content left">
        <h2>First Surfing Recorded</h2>
        <div class="flex-item1" data-slide="0">
          <!-- Image to Trigger Modal -->
          <img src="images/boards_v2.png">
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <span class="cd-read-more" data-slide="0">Read more</span>
        <span class="cd-date right" id="1900's">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

模仿HTML：

<!-- Modal Code Start -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>

  <div class="modal-body">
    <!-- Indicators -->
    <div class="carousel slide" data-interval="false" id="MyCarousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner timeline">

        <!-- 1st Modal in Timeline -->
        <div class="item active" id="modal1">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <h1>First Surfing Recorded</h1>
            <div class="col-1">
              <img src="images/boards.png" id="img1" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 2nd Modal in Timeline -->
        <div class="item" id="modal2">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Service Infrastructure</h1>
              <img src="images/taihitian_surfers_joseph_banks_lg.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 3rd Modal in Timeline -->
        <div class="item">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Tom Blake and Sam Reid surf Malibu for the first time</h1>
              <img src="images/rawImage_pcr_fred_windisch.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a href="#MyCarousel" class="left carousel-control timeline" data-slide="prev"><span class="glyphicon left"></span></a>
      <a href="#MyCarousel" class="right carousel-control timeline" data-slide="next"><span class="glyphicon right"></a>

      </div>

    </div>
  </div>
</div>

模态的Javascript：

// Timeline Modal
$(function() {
  $('.flex-item1, .cd-read-more').on('click', function(event) {
    //Gets the Item that was clicked
    var $this = $(event.currentTarget);
    $('#myModal').modal('show');
    //Use the slide number of the clicked Item to open the slide on the carousel
    $('#MyCarousel').carousel($this.data('slide'));
  });
});

如何在Bootstrap的Carousel中打开每个特定项目？

2 个答案: