我有一个打开模态的页面,这个模态有彩盒缩略图,当我点击它们时它会在页面顶部显示完整的图片,有什么方法可以在模态的顶部显示它代替?
代码:
<div id="TabsModal3" class="modal hide fade modal-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<ul class="ace-thumbnails">
<li>
<a href="assets/images/gallery/image-3.jpg" data-rel="colorbox">
<img alt="150x150" src="assets/images/gallery/thumb-3.jpg" />
<div class="text">
<div class="inner">
Sample Caption on Hover
</div>
</div>
</a>
<div class="tools tools-bottom">
<a href="#">
<i class="icon-link"></i>
</a>
<a href="#">
<i class="icon-paper-clip"></i>
</a>
<a href="#">
<i class="icon-pencil"></i>
</a>
<a href="#">
<i class="icon-remove red"></i>
</a>
</div>
</li>
</ul>
</div>
Colorbox内联脚本:
$(function () {
var colorbox_params = {
reposition: true,
scalePhotos: true,
scrolling: false,
previous: '<i class="icon-arrow-left"></i>',
next: '<i class="icon-arrow-right"></i>',
close: '×',
current: '{current} of {total}',
maxWidth: '100%',
maxHeight: '100%',
onOpen: function () {
document.body.style.overflow = 'hidden';
},
onClosed: function () {
document.body.style.overflow = 'auto';
},
onComplete: function () {
$.colorbox.resize();
}
};
});