如何使用標題彈出圖像

Question

我使用引導框架，我想用標題彈出圖像，但它只顯示圖像。我不知道如何添加代碼來顯示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

我不知道，你想要的標題來顯示，所以我假設你希望它在默認模式引導頭。您可以按如下，包含頭更新模式的代碼（如果需要的話，你可以刪除的關閉按鈕）：

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

0：添加了標題列表項目之一

例子

和js替換之前的例子標題var：

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