Question

我使用bootstrap框架，我想获得带有标题的弹出图像，但它只显示图像。我不知道如何添加代码以显示js中的标题。请帮帮我。

这是我的代码：

JS

cid CourseGrade CourseGPoint    AvgScore
10  A+          1               3.75
11  B+          2               5
12  B           3               3

HTML 的

<script>
   $(document).ready(function(){
   $('li img').on('click',function(){
   var src = $(this).attr('src');
   var img = '<img src="' + src + '" class="img-responsive"/>';

   $('#myModal').modal();
   $('#myModal').on('shown.bs.modal', function(){
   $('#myModal .modal-body').html(img);
            });
            $('#myModal').on('hidden.bs.modal', function(){
                $('#myModal .modal-body').html('');
            });
       });  
    })

</script>

Answer 1

您必须为每个模态设置所有数据属性，以便在打开模态弹出窗口时检索它们。

$(document).ready(function() {

  loadGallery(true, 'a.thumbnail');

  function loadGallery(setIDs, setClickAttr) {
    var selector,
      counter = 0;

    function updateGallery(selector) {
      var $sel = selector;
      current_image = $sel.data('image-id');
      $('#image-gallery-caption').text($sel.data('caption'));
      $('#image-gallery-title').text($sel.data('title'));
      $('#image-gallery-image').attr('src', $sel.data('image'));
      disableButtons(counter, $sel.data('image-id'));
    }

    if (setIDs == true) {
      $('[data-image-id]').each(function() {
        counter++;
        $(this).attr('data-image-id', counter);
      });
    }
    $(setClickAttr).on('click', function() {
      updateGallery($(this));
    });
  }
});

.page-header {
  text-align: center;
}
a.thumbnail,
.thumbnail:hover,
.thumbnail:focus,
.thumbnail:active {
  border: none;
  outline: none;
}
.caption {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Modal + Image</h1>

      <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 1" data-caption="This a caption 1" data-image="http://placehold.it/350x150/f00/fff" data-target="#image-gallery" />
        <img class="img-responsive" src="http://placehold.it/350x150/548457/fff" alt="" />
        </a>
      </div>
      <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 2" data-caption="This a caption 2" data-image="http://placehold.it/350x150/000/fff" data-target="#image-gallery" />
        <img class="img-responsive" src="http://placehold.it/350x150/000/fff" alt="" />
        </a>
      </div>
      <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 3" data-caption="This a caption 3" data-image="http://placehold.it/350x150/266080/fff" data-target="#image-gallery" />
        <img class="img-responsive" src="http://placehold.it/350x150/266080/fff" alt="" />
        </a>
      </div>
      <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 4" data-caption="This a caption 4" data-image="http://placehold.it/350x150/1c1c1c/fff" data-target="#image-gallery" />
        <img class="img-responsive" src="http://placehold.it/350x150/1c1c1c/fff" alt="" />
        </a>
      </div>
    </div>
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" />
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>

          </button>
          <h4 class="modal-title" id="image-gallery-title"></h4>

        </div>
        <div class="modal-body">
          <img id="image-gallery-image" class="img-responsive" src="" />
        </div>
        <div class="modal-footer">
          <div class="col-md-12 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

我不确定你想要标题显示在哪里，所以我假设你想要它在默认的bootstrap模式标题中。您可以按如下方式更新模态代码，以包含标题（如果需要，可以删除关闭按钮）：

<div class="popup">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <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"></h4>
                </div>
                <div class="modal-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

然后你会像这样修改你的js：

<script>
    $(document).ready(function(){
        $('li img').on('click',function(){
            var src = $(this).attr('src');
            var img = '<img src="' + src + '" class="img-responsive"/>';
            var title = src;
        });
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function(){
            $('#myModal .modal-body').html(img);
            $('#myModal .modal-title').text(title);
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').html('');
            $('#myModal .modal-title').text('');
        });
    });
</script>

如果您只想使用文件名，可以为图像设置一个只是文件名的标题并使用它：

其中一个添加了标题的列表项的示例：

<li class="tp-icon"><a href="#"> <img src="img/AMK.png" title="AMK"><p>name</p><p>passowrd</p></a>
</li>

和js替换前面的示例标题var：

var title = $(this).attr("title");

如何使用标题弹出图像

2 个答案: