調整Fancybox iframe覆蓋寬度和高度的問題

我正在使用Fancybox創建覆蓋iframe的一切工作，但我似乎無法改變寬度/高度的值。我使用的fancybox-1.2.6和jquery1.2.6調整Fancybox iframe覆蓋寬度和高度的問題

$(document).ready(function() { 

     $("a.iframe").fancybox({ 
    'width' : '75%', 
    'height' : '75%', 
    'autoScale' : false, 
    'transitionIn' : 'none', 
    'transitionOut' : 'none', 
    'type' : 'iframe' 
}); 
    });

和

<a class="iframe" id="iframe" title="Sample title" href="http://google.com/">iframe</a>

來源

2011-05-18 Michael

你必須直接改變它的CSS，因爲未啓用的fancybox jQuery的實際的一部分。

$("#fancybox").css({'width': '500px', 'height': '500px'});

有這樣或這樣的事情，

jQuery(document).ready(function() { 
$.fancybox(
    { 
     'autoDimensions' : false, 
     'width'    : 350, 
     'height'   : 'auto', 
     'transitionIn'  : 'none', 
     'transitionOut'  : 'none' 
    } 
); 
});

來源

2011-05-18 16:57:03 Mertis

謝謝。我會在哪裏把它放在我的代碼中？ – Michael 2011-05-18 17:12:13

增加了另一種方式來做到這一點 – Mertis 2011-05-18 17:26:20

也我看到你有$（「a.iframe」）。fancybox（{ 爲什麼在那裏「a」你不需要它只是去$（「。iframe」） – Mertis 2011-05-18 17:28:56

這在過去爲我工作。我不得不設置高度和寬度。

$(document).ready(function() {   
    $("a.iframe").fancybox({ 
        'autoDimensions' : false, 
        'width'    : 600, 
        'height'   : 150, 
        'transitionIn'  : 'elastic', 
        'transitionOut'  : 'elastic', 
        'type'    : 'iframe' 

       }); 
    });

來源

2011-05-18 19:53:16

再次，這是行不通的。是否因爲我使用1.2.6？ – Michael 2011-05-18 20:15:20

是的。更新到最新版本Fancybox 1.3.4。我'我只是用jquery-1.5.2.min.js檢查了這段代碼，它確實有效。確保你正在運行最新的jquery和fancybox。 – 2011-05-18 22:18:01

我加入了寬度和高度屬性的鏈接標籤這樣的解決了這個問題：

<a id="various3" href="action.html" width="60%" height="60%">Iframe</a>

你的fancybox代碼：

$("#popup").fancybox({ 
    'autoScale'  : false, 
    'width'   : $("a#popup").attr("width"), 
    'height'  : $("a#popup").attr("height"), 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'type'   : 'iframe' 
});

來源

2011-12-16 09:56:51 JAY

請不要使用Firefox 。它不起作用，他們沒有使高度兼容，而是嘗試使用chrome！（！最新的Firefox今天）如果是支持的瀏覽器，刪除對PX的報價，把報價％，如：

'width': 400; //400 pixels; 
'width': '75%'; //75% of the screen 
//height do not work on Mozilla Firefox (today!)

來源

2012-11-21 11:41:26 vimxts

只是試試這個

$(".fancyboxiframe").fancybox({ 
     fitToView:false, 
     autoSize:false, 
     'width':parseInt($(window).width() * 0.7), 
     'height':parseInt($(window).height() * 0.55), 
     'autoScale':true, 
     'type': 'iframe' 
    });

來源

2013-03-12 06:34:11

嘗試使用：

'maxHeight' : 380,

來源

2013-03-22 07:39:52 jok3r

下面是如何手動在一個固定大小的fancybox打開一個iframe

$.fancybox.open({ 
    'href': 'mypage.html', 
    'type': 'iframe', 
    'autoSize': false, 
    'width': 800, 
    'height': 800 
});

來源

2013-04-11 10:00:39

（這是autoSize：false，這是關鍵的一點） – 2014-07-23 10:19:21

調整Fancybox iframe覆蓋寬度和高度的問題

回答

相關問題