推特引导-点击图片显示模态，有多个图片和多个模态

Twitter Bootstrap - Clicking images to show modals, with multiple images and multiple modals.

本文关键字：模态 -点 显示      更新时间：2023-09-26

我有9个图像，每个图像都需要显示不同的模态。无论我点击哪张图片，它都只显示第一个模态。我可以看到它们都有相同的ID，这可能是我的错误，但我也不太擅长javascript。全部，点击一张图片，显示模态A及其内容，点击另一张图片显示模态B及其不同内容。

我只有：

    <script type="text/javascript">$('#myModal').modal('show')</script>
      <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            <img src="2.jpg" class="img-responsive"/>
          </a>
      </div>
               <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            First Modal
          </a>
          <a href="#smallModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#smallModal">
            Second Modal
          </a>
      </div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                FIRST MODAL CONTENT
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                SECOND MODAL CONTENT
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>
相关文章：