Question

我一直试图让这个引导模式运转起来没有任何运气。在这里看到类似的问题，但没有人帮助过我。

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

无论如何这里是代码。编辑：我查看了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

添加＆＃34; getSrc＆＃34;要标记的类

<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放在同一个类中=＆＃34;＆＃34;

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

Answer 2

三个问题 - 首先你试图在“.getSrc”的onclick上获取src - 但你没有在代码中指定该类。您需要按以下方式添加它：

其次你有一个拼写错误的“tumbnail”，第三个你用“this”来获取图像的src，但是图像嵌套在<a>元素中 - 所以“this”将引用<a>而不是其中的图像..

  <!-- Button trigger modal -->
<a class="thumbnail getSrc" 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>

你需要找到一个元素中的图像并获得该src（或者使用一个数据属性就像那个已经存在的那个。：

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

如果你想在a上使用data属性那么它将是：

<a class="thumbnail getSrc" href="#" data-source="citymalmo_page_thumbnail.png" 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>

<script type="text/javascript">
 $('.getSrc').click(function() {
    var src =$(this).attr('data-source');
 $('.showPic').attr('src', src);
 });
</script>

Bootstrap模式无法显示图像

2 个答案: