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

Answer 2

如果iframe来自同一个域，那么您可以使用contents()

访问内容

$('#fancybox-frame').contents().find('h1').prepend('<a>Button</a>');

对于跨域案例，这是不可能的。

如果您的案例还需要注入javascript小部件，那么注入DOM可能会很困难，您可以更好地选择与div一起显示的其他iframe。

为此，只需将div显示在onComplete事件或onStart事件中，然后根据花式框位置，高度等进行定位。

要使其高于叠加，请给它一些定位，显然，你应该给出更高的z-index叠加。

#fancybox-overlay {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1100;
}
#mydiv{
    position:absolute;
    z-index:1101;
    }

Answer 3

您可以尝试数据属性（data-fancybox-title）并初始化fancybox以将其置于顶部，如下所示：

＆＃13;

$(".fancybox-video").fancybox({
  helpers : {
    title: {
      type: 'inside',
      position: 'top'
    }
  }
});

＆＃13;

<a href="#" class="fancybox-video" data-fancybox-title="<h1>Title</h1><div>Other stuff</div>" data-fancybox-type="iframe" data-fancybox-href="https://www.youtube.com/XXXXX"></a>

＆＃13;

您可以在此处找到更多信息：Fancybox Instructions

Answer 4

我需要FancyBox 1.3的解决方案，在我的情况下，我使用 onComplete 事件来更新内容

<a class="iframe" id="fancybox-preview-card" href="about:blank"></a>

   $("#fancybox-preview-card").fancybox({
        'height': screen.availHeight * 0.9,
        'width' : 600,
        'onComplete' : updatePreviewContent,
        'overlayShow': false
    });

...

var contentUpdated = false;

function previewEcardTemplate() {
    contentUpdated = false;
    $("#fancybox-preview-card").attr("href", "about:blank").trigger("click");

}

function updatePreviewContent() {
    // if content has already been updated then back out 
    if (contentUpdated)
        return;

    contentUpdated = true;

    $.get('/template/mytemplate.htm', function (data) {
        // Any mods to the html can go here
        var ifrm = document.getElementById('fancybox-frame');
        ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
        ifrm.document.open();
        ifrm.document.write(data);
        ifrm.document.close();
    })

}

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

4 个答案: