動態設置Fancybox2的寬度/高度

我想用fancybox v2來顯示其內容是動態生成的div。我在事物的計劃中設定了div的大小。我試過了fancybox文檔中的例子來顯示大小固定的div。它看起來像這樣：動態設置Fancybox2的寬度/高度

<a id="fancy" href="#showdiv">Show contents of div.</a> 
<div id="showdiv">...</div> 

<script> 
$(document).ready(function() { 
    $("#fancy").fancybox({autoSize:false, width: W, height: H, ...}); 
}); 
</script>

我要的是W=$("#showdiv").width和H=$("#showdiv").height。顯然，在準備好文件時，H和W不可用。我如何去做這件事？

編輯：下面是內容DIV的HTML：

<div id="hidediv" style="display:none"> 
    <div id="showdiv" style="display:block;position:relative"> 
     <canvas id="mycanvas" style="position:relative;display:block"></canvas> 
    </div> 
</div>

在錨的點擊處理程序「#fancy」我做的：

function onclick() { 
    var jcanvas = $("#mycanvas").css('width', some_width).css('height', some_height); 
    // draw on canvas 
}

「#fancy」是一個與Fancybox相關聯。

另：

來源

2013-04-03 rajorshi ghosh

'我把div的大小設置的很晚'：所以它的大小（至少是'width'），不是嗎？如果這是正確的，那麼你不需要在fancybox選項中設置'width'和'height'和'autoSize：false'，它們會自動計算，儘管'div'是在稍後添加的。 – JFK 2013-04-03 23:46:48

@JFK我試過但我已經看到，如果我不設置這些值，那麼彈出窗口的寬度就會有錯（總是大約100）。調整瀏覽器大小會強制重新調整寬度x高度。 – 2013-04-04 01:04:59

你可以發佈動態添加'div'（#showdiv）的呈現html嗎？並且，您如何設置其大小：動態？通過CSS？如果你想獲得幫助，你需要提供大量的信息;） – JFK 2013-04-04 01:25:43

假設這個函數處理您HTTP POST

function onclick() { 
    // set size of canvas 
    var jcanvas = $("#mycanvas").css({ 
     "width": some_width, // variable from response ? 
     "height": some_height 
    }); 
    // draw on canvas 
}

響應...然後使用的fancybox afterLoad回調像

$("#fancy").fancybox({ 
    fitToView: false, // the box won't be scaled to fit the view port (optional) 
    afterLoad: onclick() 
});

編輯調用該函數選項是同時處理，同一功能u中的畫布和fancybox唱的jQuery .on()所以如果你有

<a id="fancy" href="#showdiv">Show contents of div</a>

使用這個腳本：在這種情況下

$("#fancy").on("click", function() { 
    // do HTTP POST 
    // on success, get size form response 
    var some_width = 300, 
     some_height = 180; 
    // set canvas size 
    var jcanvas = $("#mycanvas").css({ 
     // variables from response 
     "width": some_width, 
     "height": some_height 
    }); 
    // draw on canvas 
    // 
    // then open fancybox ($(this) = #showdiv) 
    $.fancybox($(this),{ 
     // API options etc 
     fitToView: false 
    }); 
});

你不需要任何回調。

注意：.on()需要的jQuery V1.7 +

以作記錄見JSFIDDLE。

來源

2013-04-04 02:50:36 JFK

酷！我會嘗試並讓你知道。謝謝。 – 2013-04-04 03:13:40

方法一爲我工作。謝謝。 – 2013-04-04 15:16:58

動態設置Fancybox2的寬度/高度

回答

相關問題