javascript - Bootstrap 模式无法显示图像

Question

我一直在尝试让这个 Bootstrap 模式正常工作，但没有任何运气。也在这里研究类似的问题，但没有一个对我有帮助。

我的问题是图像不显示。窗口在那里，但里面没有图像。

无论如何，这是代码。 编辑:我看过Need to load image as modal on click in bootstrap css ，我什至尝试了代码，但也没有让它为我工作。有一个新问题，如果这是错误的，我很抱歉。 :/

    <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-2">
        <h4>Tidningen City Malmö</h4> 
        </div>
      <div class="col-md-4">
        <!-- Button trigger modal -->
        <a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_frontpage_thumbnail.png" alt="City Malmö Förstasida"></a>
        </div>
        <div class="col-md-4">
          <!-- Button trigger modal -->
        <a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="citymalmo_page_thumbnail.png" alt="City Malmö sida"></a>
        </div>
      </div>
    <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-2">
        <h4>Sveriges Radio P4</h4> 
        </div>
        <div class="col-md-4">
          <!-- Button trigger modal -->
        <a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal"><img class="img-responsive center-block" src="srp4_page_thumbnail.png" alt="SR P4"></a>
        </div>
      </div>

    <script type="text/javascript">
     $('.getSrc').click(function() {
        var src =$(this).attr('src');

     $('.showPic').attr('src', src);
     });
    </script>

<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="image-gallery-title"></h4>
      </div>
      <div class="modal-body">
        <img class="img-responsive" src="" class="showPic">
      </div>
    </div>
  </div>
</div>

我已加载 bootstrap.min.js。

Answer 1

将“getSrc”类添加到标签

<hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-2">
            <h4>Tidningen City Malmö</h4> 
        </div>
        <div class="col-md-4">
            <!-- Button trigger modal -->
            <a class="tumbnail" href="#" data-image="citymalmo_frontpage.png" data-toggle="modal" data-target="#myModal">
            <img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö Förstasida">
            </a>
        </div>
        <div class="col-md-4">
            <!-- Button trigger modal -->
            <a class="tumbnail" href="#" data-image="citymalmo_page.png" data-toggle="modal" data-target="#myModal">
            <img class="img-responsive center-block getSrc" src="flag.png" alt="City Malmö sida"></a>
        </div>
      </div>
<hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-2">
            <h4>Sveriges Radio P4</h4> 
        </div>
        <div class="col-md-4">
            <!-- Button trigger modal -->
            <a class="tumbnail" href="#" data-image="srp4_page.png" data-toggle="modal" data-target="#myModal">
            <img class="img-responsive center-block getSrc" src="flag.png" alt="SR P4"></a>
        </div>
      </div>

接下来将两个类 img-responsive showPic 放在同一个类中=“”

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="image-gallery-title"></h4>
      </div>
      <div class="modal-body">
        <img class="img-responsive showPic" src="" >
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
    $(document).ready(function()
    {
        console.log( "ready!" );
     $('.getSrc').click(function() {
         console.log("hello");
        var src =$(this).attr('src');

     $('.showPic').attr('src', src);
     });
    });
</script>

请注意:您需要加载 jquery javascript、bootstrap css 和 javascript 库

这是一个工作示例

https://jsfiddle.net/mkfLmLx1/