2

我无法弄清楚如何将一些额外的内容放入我用 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？不过，我在使用回调函数时遇到了麻烦，所以我只需要一些关于最佳方法的总体指导。

4

4 回答 4

5

如果使用 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;
}
于 2012-07-19T00:41:18.850 回答
2

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

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

这对于跨域情况是不可能的。

如果您的案例还需要注入 javascript 小部件，那么注入 DOM 对您来说可能很困难，您最好选择div与iframe.

为此，只需让 div 显示在onCompleteevent 或onStartevent 上，然后根据 fancybox 位置、高度等定位它。

为了让它在覆盖层之上，给它一些定位，你显然应该给它一个更高的 z-index 覆盖层。

#fancybox-overlay {
    display: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1100;
}
#mydiv{
    position:absolute;
    z-index:1101;
    }
于 2012-07-18T23:07:16.937 回答
1

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

$(".fancybox-video").fancybox({
  helpers : {
    title: {
      type: 'inside',
      position: 'top'
    }
  }
});
<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>

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

于 2016-08-31T23:42:00.627 回答
0

我需要 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();
    })

}
于 2013-10-24T11:53:38.110 回答