如何弹出带有标题的图像

Question

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

这是我的代码：

js

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

html

<div class="row">
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <ul class="main-icon">
            <li class="tp-icon"><a href="#"> <img src="img/khmermart.png">        <p>name</p> <p>passowrd</p> </a>

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

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

            </li>
        </ul>
    </div>
</div>
<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-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

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 模态 header 中显示它。您可以按如下方式更新模态代码，以包含 header（如果需要，您可以删除关闭按钮）：

<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 title = $(this).attr("title");

如何弹出带有标题的图像

How to popup image with the title

html

javascript

jquery

twitter-bootstrap

bootstrap-modal