如何将其他内容添加到fancybox iframe中

Question

我无法弄清楚如何将一些额外的内容放入我用fancybox显示的iframe中.

我的基本设置:

$('.fancybox').fancybox({
    'autoScale': false,
    'transitionIn': 'none',
    'transitionOut': 'none',
    'type': 'iframe',
    'padding': 0,
    'closeClick': false,
    helpers: {
        overlay: {
            closeClick: false
        }
    }

<a class="fancybox" href ="http://my-iframe.example"/><img src="myimage.jpg" width="x" height="y" /></a>

所以我需要在iframe下面放置几个自定义按钮和另一个javascript小部件,但是在背景叠加层之上.

我只是在抓住可能是最好的方法来解决这个问题.我想我可以将这些内容放在div中,然后在fancybox完成加载后显示该div？我遇到了回调函数的问题,所以我只需要最好的方法来做到这一点.

Answer 1

如果使用fancybox v2.x尝试使用回调afterShow将附加内容附加到.fancybox-inner选择器,如:

afterShow: function(){
 var customContent = "<div class='customHTML'>My custom content</div>"
 $('.fancybox-inner').append(customContent);
}

使用CSS来设置和定位这些附加内容,例如

.customHTML {
 position: absolute; 
 z-index: 99999; /* this place the content over the fancybox */
 bottom: 0px;
 right: 0;
 background: #f2f2f2;
 width: 200px;
 height: 100px;
 display: block;
}