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>

そのため、いくつかのカスタムボタンと別のjavascriptウィジェットをiframeの下、ただし背景オーバーレイの上に配置する必要があります。

私はこれを行うための最良の方法を理解するのに苦労しています。このコンテンツを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。

そのためには、onCompleteイベントまたはonStartイベントにdivを表示し、ファンシーボックスの位置や高さなどに応じて配置します。

オーバーレイの上に配置するには、ある程度の位置を指定する必要があります。もちろん、そのオーバーレイに高い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 に答える