莫代尔打开彩盒图片

时间:2013-11-21 21:42:37

标签: jquery modal-dialog colorbox

我有一个打开模态的页面,这个模态有彩盒缩略图,当我点击它们时它会在页面顶部显示完整的图片,有什么方法可以在模态的顶部显示它代替?

代码:

<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: '&times;',
        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();
        }
    };
});

0 个答案:

没有答案