如何使用标题弹出图像
问题描述：
我使用引导框架，我想用标题弹出图像，但它只显示图像。我不知道如何添加代码来显示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>
答
你必须为每个数据属性，所有模式，所以你就可以当检索它们你打开模式弹出。
$(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>
答
我不知道，你想要的标题来显示，所以我假设你希望它在默认模式引导头。您可以按如下，包含头更新模式的代码（如果需要的话，你可以删除的关闭按钮）：
<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">×</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");