如何將其他內容放入fancybox iframe中

我無法弄清楚如何將一些額外的內容放入iframe中，我用fancybox顯示。如何將其他內容放入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。雖然我在回調函數時遇到了問題，但我只需要一些總體方向就可以做到這一點。

來源

2012-07-18 absentx

什麼的fancybox的版本？因爲您正在使用v1.3.x和v2.x中的選項，並且它們彼此不兼容。 – JFK 2012-07-18 23:23:07

啊好點！我正在使用版本2. – absentx 2012-07-19 00:21:30

如果使用的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-19 00:41:18 JFK

正是我所需要的感謝。 – absentx 2012-07-19 03:00:24

如果iframe是來自同一個域，那麼你可以訪問的內容與contents()

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

這不會對跨域的情況下是不可能的。

如果您的情況也需要注入JavaScript小部件，注入DOM可能會很困難，您可以更好地選擇與iframe一起顯示的其他div。

對於剛剛根據的fancybox位置使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; 
    }

來源

2012-07-18 23:07:16 sabithpocker

Iframe是針對不同的域名，欣賞答案，會試用。 – absentx 2012-07-19 00:22:54

OP沒有在原始問題中指定fancybox的版本，但他正在使用v2.x ...在這種情況下選擇器'$（'＃fancybox-frame'）'（v1.3。2+）應該是'$（'。fancybox-iframe'）'爲v2.x – JFK 2012-07-19 00:46:28

@JFK這應該是一個更精確的答案，我沒有fancybox的經驗，只是檢查網站，看看它是如何工作:) – sabithpocker 2012-07-19 00:51:49

我需要一個解決方案的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-24 11:53:38 RadarBug

您可以嘗試的數據屬性（數據的fancybox標題）並初始化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 Instructions

來源

2016-08-31 23:42:00 Eugen

如何將其他內容放入fancybox iframe中

回答

相關問題